Question

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

enter image description here

我的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无法绑定到动态创建的变量。所以你面对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;
     }

Answer 2

您的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

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

2 个答案: