时间戳

首页 > 解决方案 > 如何将html中的元素值列表绑定到Angular5中的对象数组

angular - 如何将html中的元素值列表绑定到Angular5中的对象数组

问题描述

由于[(ngModel)]，您可以将 html 中元素的值绑定到 angulare5 中组件中的字段。

问题陈述
有一个在 html 的网格中显示的对象列表。像这样：

<tr *ngFor="let entity of objectList;">
    <td> <input type="text" value="entity.name"></td>
    <td> <input type="text" value="entity.code"></td>
    <td> <input type="text" value="entity.itemName"></td>
</tr>
<tr>
      <input type="submit" (click)="saveGroup()">
</tr>

并且用户想要编辑这些值并通过单击提交按钮保存在组中。

我想像这样声明这个对象的数组：public objectList: Item[]并绑定到这个网格的值。每当用户更改上述网格的任何值时，它在记录中的条目objectList都会自动更改。

如果不可能，我会写更多的代码来获取这个网格的值。

可能吗？

标签： angulartypescript

解决方案

您应该[(ngModel)]在字段之间使用，以便输入字段使用两种方式数据绑定，因此每当您更新 objectList 中的对象时，它将自动更新。

<tr *ngFor="let entity of objectList;">
    <td> <input type="text" [(ngModel)]="entity.name"></td>
    <td> <input type="text" [(ngModel)]="entity.code"></td>
    <td> <input type="text" [(ngModel)]="entity.itemName"></td>
</tr>

推荐阅读