时间戳

首页 > 解决方案 > Angular 8 中 *ngFor 中的 HTML 输入中的数据绑定

javascript - Angular 8 中 *ngFor 中的 HTML 输入中的数据绑定

问题描述

我正在使用 *ngFor 循环遍历对象数组并在 HTML 中显示值。在 HTML 中，该值显示在输入元素中，因为我希望用户在需要时更改该值，然后使用“保存”按钮保存更改后的值。不幸的是，数据绑定根本不起作用。数组中的值未显示。这是我的代码：

<tr *ngFor="let data of rrReasons; let i = index;trackBy:trackByIndex;">
<td>
  <input type="number" name=a{{index}} [(ngModel)]="rrReasons[index].signatory1">
</td>

这是json：

{“signatory1”：“1009648”，“signatory2”：“1003444”，}

标签： javascripthtmlangular

解决方案

您正在使用rrReasons[index].signatory1. index不能作为循环内的变量使用。

您应该改用rrReasons[i].signatory1or data.signatory1。

<table>
  <tr *ngFor="let data of rrReasons; let i = index;trackBy:trackByIndex;">
    <td>
      <input type="number" name=a{{i}} [(ngModel)]="rrReasons[i].signatory1">
    </td>
</table>

演示：https ://stackblitz.com/edit/angular-zmscxv

推荐阅读