ngModel 只接受 Angular 2 中的一个字符更改

Question

下图显示了我的表格，其中数据是动态设置的。例如，它可以有 2,3,4 ... 列。

我的 html 代码如下：<thead>包含标题值，并tbody包含可以修改的值。

<table class="table-conf">
    <thead>
       <tr>
           <th *ngFor="let data of jsonText[0]" style="text-align: center;">{{data}}</th>
       </tr>
    </thead>
    <tbody>
       <tr *ngFor="let data of jsonText; let i=index">
         <ng-container *ngIf="i!=0">
             <td class="padding-table" *ngFor="let dt of data; let j=index">
                 <input style="text-align: center;" [(ngModel)]="jsonText[i][j]">
             </td>
         </ng-container>
       </tr>
    </tbody>
</table>

以下是jsonText我迭代的变量示例：

jsonText Array(6)
     0: (2) ["Task", "Hours per Day"]
     1: (2) ["Work", 11]
     2: (2) ["Eat", 2]
     3: (2) ["Commute", 2]
     4: (2) ["Watch TV", 2]
     5: (2) ["Sleep", 7]

问题是：当我尝试修改表中的元素时，我一次只能修改一个字符。例如：如果我想换"Eat"到"Lunch"，我需要删除"Eat"，然后写L上输入，写再次点击u，再次点击，等等......

请问有人可以帮我吗？

Answer 1

正如其他答案中所说的那样，当您绑定jsonText到ngModel然后ngFor重新评估时，您会失去输入的注意力。

当你这样做时，[(ngModel)]="dt"ngModel 无法绑定到动态创建的变量。所以你面临这个问题。

所以要让它工作：

(a) 你必须将trackBy函数应用到你的ngFor,阅读

所以在 HTML 添加trackBy函数，并绑定 as [(ngModel)]="data[j]， Like ：

 <tr *ngFor="let data of jsonText; let i=index">
         <ng-container *ngIf="i!=0">
             <td class="padding-table" *ngFor="let dt of data; let j=index; trackBy:customTrackBy">
                 <input style="text-align: center;" [(ngModel)]="data[j]">
             </td>
         </ng-container>
</tr>

(b) 并在您的组件中添加函数并跟踪索引。

     customTrackBy(index: number, obj: any): any {
         return index;
     }