如何使用 ngFor 指令以角度列出表中对象数组的所有元素？答案

【问题标题】：How to list all elements of an array of object in a table using ngFor directive in angular?如何使用 ngFor 指令以角度列出表中对象数组的所有元素？
【发布时间】：2019-10-24 09:56:08
【问题描述】：

我必须在表格中显示一组对象数据。

我试过这段代码：

    <tr *ngFor="let item of fetchedMails">
      <td><input name="name" [(ngModel)]="item.full_name"></td>
      <td><input name="email" [(ngModel)]="item.email"></td>
    </tr>

其中 fetchedMails 是对象数组

我使用了 2-way 绑定，以便用户能够编辑名称并重新提交表单。

但在表格中，我只能得到数组的最后一个元素重复 n 次。

如何显示表格中的每个数组元素？

【问题讨论】：

从输入元素中移除 name 属性或使用 `name="{{'name_'+i}}" 和 name="{{'email_'+i}}" 代替。
显示fetchedMails
@Sanoj_V ngModel 需要 name 属性

标签： angular

【解决方案1】：

尝试以下解决方案.. 只需删除 name 属性并将其替换为 ngModelOptions

<tr *ngFor="let item of fetchedMails">
  <td><input [ngModelOptions]="{standalone: true}" [(ngModel)]="item.full_name"></td>
  <td><input [ngModelOptions]="{standalone: true}" [(ngModel)]="item.email"></td>
</tr>

【讨论】：

【解决方案2】：

将索引绑定到名称属性以使名称唯一

<tr *ngFor="let item of fetchedMails; let i=index">
  <td><input name="name_{{i}}" [(ngModel)]="item.full_name"></td>
  <td><input name="email_{{i}}" [(ngModel)]="item.email"></td>
</tr>

【讨论】：