angular - 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 绑定(bind)到 ngModel 时，ngFor 会重新计算，您会失去输入焦点。

当您执行 [(ngModel)]="dt" 时，ngModel 无法绑定(bind)到动态创建的变量。所以你面对this issue.

所以让它工作:

(a) 您必须将trackBy 函数应用到您的ngFor，Read

因此在 HTML 中添加 trackBy 函数，并像 [(ngModel)]="data[j] 那样进行绑定(bind)，比如:

 <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;
     }