html 如何绑定动态表中的文本输入？

jslywgbw 于 2022-12-16 发布在其他

关注(0)|答案(1)|浏览(157)

我有一个表，其中一列是文本输入。
当用户编辑文本时，保存和取消按钮均被启用。
保存按钮应该只发送新的值到服务器。我可以做到这一点没有问题。
但是取消按钮我不知道怎么把输入改回来，因为模型和子元素都有，我怎么知道我写的是表的哪个元素？
模板部件：

<table mat-table [dataSource]="gsServersDataSource" class="mat-elevation-z8">

        <tr mat-header-row *matHeaderRowDef="gsServersHeaders"></tr>
        <tr mat-row *matRowDef="let row; columns: gsServersHeaders;"></tr>

        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef > Name </th>
          <td mat-cell *matCellDef="let element" > {{element.name}} </td>
        </ng-container>

        <ng-container matColumnDef="value">
            <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by value"> Value </th>
            <td mat-cell *matCellDef="let element">
                <input id="valueInput" type="text" value="{{element.value}}" (keyup)="onChangeValue()">
            </td>
        </ng-container>

        <ng-container matColumnDef="modify">
            <th mat-header-cell *matHeaderCellDef> Modify </th>
            <td mat-cell *matCellDef="let element">
                <button id="saveChanges" mat-mini-fab color="primary" (click)="onClickSave()" [disabled]="disabled">
                    <mat-icon>✓</mat-icon>
                </button>

                <button id="cancelChanges" mat-mini-fab color="primary" (click)="onClickCancel(element)" [disabled]="disabled">
                    <mat-icon>X</mat-icon>
                </button>
            </td>
        </ng-container>
</table>

组成部分：

gsServersDataSource = [{name: 'name1', value: 'value1'}];
gsServersHeaders: string[] = ['name', 'value', 'modify'];

disabled=true;

onChangeValue(){
    this.disabled=false;
}

onClickSave(element: InstanceDataPoint){
    //service call with new value
    this.disabled=true;

}

onClickCancel(element: InstanceDataPoint){
    //Put original back : How to??
    this.disabled=true;
}

}

Html

来源：https://stackoverflow.com/questions/74802093/how-to-bind-a-text-input-thats-inside-a-dynamic-table

1条答案

按热度按时间

roejwanj1#

我为包含用户输入的临时值的每一行创建了另一个值。
当用户想要保存它时，它将被发布，并在成功时保存为原始值。
当用户想要取消更改时。临时值将重置为原始值。
在模板上，我现在使用newValue作为文本输入的值。
我把输入的值传递给keyup钩子

<ng-container matColumnDef="value">
                <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by value"> Value </th>
                <td mat-cell *matCellDef="let element">
                    <input id="valueInput" type="text" value="{{element.newValue}}" (keyup)="onChangeValue(element,$event.target.value)">
                </td>
</ng-container>

在组件上，我现在将文本输入更改后的输入值保存到newValue中。
点击保存后，如果发布成功，我会将newValue分配给originalValue。
单击“取消”时，我会将newValue放回原始值。

onChangeValue(element: InstanceDataPoint, newValue: string){
    element.disabled = false;
    element.newValue = newValue;
}

onClickSave(element: InstanceDataPoint){
    this.gsInstancesService.postModifiedValue(this.selectedEnvironment,
        { "param-name": element.name, "param-val": element.newValue, "server-id": element.server, "language": element.language}).
        subscribe({complete: ()=>element.value=element.newValue});
    element.disabled=true;
}

onClickCancel(element: InstanceDataPoint){
    element.newValue = element.value;
    element.disabled = true;
}

赞(0）回复(0）举报 2022-12-16

我来回答

html 如何绑定动态表中的文本输入？

1条答案

相关问题

热门标签

最新问答