如何创建带有可修改字段的 HTML 动态表？ （字段目前以某种方式相互关联）

Question

我在用 HTML 创建动态表格时遇到了一个奇怪的问题。

我希望用户能够在表中创建新条目，在这种情况下我称他们为人员。

每个人都是PersonInfo类型的接口。

interface PersonInfo {
    showOtherData: boolean;
    person: Person;
}

interface Person {
   name: string;
   age: number;
}

我有很多人。每次添加一个新人，就意味着 HTML 表格中多了一个新行。

我创建我的表：

<table>

<tbody>

然后我想遍历不同的人来显示不同的数据单元：

<td>
    <input [(ngModel)]="person.person.name" class="center form-control" type="text"
      placeholder="Name" data-toggle="tooltip" title="Person's name" />
 </td>

Answer 1

如果你想循环模板中的数据，你需要使用 *ngFor：我假设你的列表被称为“persons”：

<td *ngFor="let info of persons">
  <input [(ngModel)]="info?.person?.name" class="center form-control" type="text"
      placeholder="Name" data-toggle="tooltip" title="Person's name" />
</td>

这将为列表中的每个人创建一个新的 td。