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

您的 ngFor 绑定到 jsonText，因此每次编辑 jsonText[i][j] 时，您都在强制 ngFor 指令重新评估，这就是您失去焦点的原因。

在这种情况下，只需直接绑定到 'dt'

 <input style="text-align: center;" [(ngModel)]="dt">

这样你编辑的是带有 jsonText 的字段，而不是整个对象。

此外，如果 dt 在模型中不起作用，那么 dt 可能不是您所期望的。

在您的 html 模板中添加一行以显示 dt 的值。

<tbody>
   <tr *ngFor="let data of jsonText; let i=index">
     <ng-container *ngIf="i!=0">
         <td class="padding-table" *ngFor="let dt.value of data; let j=index">
             {{dt.value | json}} // Add this
         </td>
     </ng-container>
   </tr>
</tbody>

解决方案

问题在于您的 json 数据。 jsonText 数组只是一个字符串或数字数组的数组。不是“对象”，因此它们不绑定到任何变量。这就是为什么 ngModel 不适用于“dt”的原因。 dt 没有给定变量。

因此，将 jsonText 数组的设置方式更改为如下所示：

jsonText = [
  [{ value: "task", id: 0}, {value: "Hours per day", id: 1}],
  [{ value: "work", id: 2}, {value: "11", id: 3}],
  [{ value: "eat", id: 4}, {value: "commute", id: 5}],
  ....
]

Working Example

Answer 2

正如其他答案中正确所说，当您将jsonText 绑定到ngModel 然后ngFor 重新评估并且您失去输入的焦点。

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

所以要让它工作：

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

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

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