angular - Angular 为 2 的双向绑定(bind)数组

Question

我知道 angular 2 中的基本双向绑定(bind)，如文档中所示。

我有一个 person 数组，我用它来构建一个 html 列表:

现在，当我点击一个人所在的行时，我可以使用双向绑定(bind)对其进行编辑:

 <form>
    <label>Name: </label>
    <input [(ngModel)]="selectedPerson.name" name="name"/>

    <label>Description: </label>
    <input [(ngModel)]="selectedPerson.job" name="job"/>
</form>

现在，我想要的是双向绑定(bind)列表本身:(列表与行编辑器处于不同的 View 中)

 <div class='row' *ngFor="let person of model">
    <div class='col'>{{person.name}}</div>
    <div class='col'>{{person.job}}</div>
 </div>

目前，我正在使用 *ngFor 列出所有人。如果我的 model 是两个人的数组，我会得到两行。在某些情况下，model 可能会更改为有 3 或 4 个人。有什么办法可以使 Angular 检测到这一点并相应地添加行吗？ [(ngModel)] 在这里似乎不适用。

基本上，我希望我的 ListView 无需刷新页面即可更新。如何让 ngFor 中使用的 model 监听变化？

Answer 1

感谢@David Blaney。我不确定我是否可以发布它。我只想扩展您的示例以直接在表中的每一行上使用双向绑定(bind)数组编辑网格/编辑表 - 当用户在“直接在表中的输入元素”中写入时，angular 负责更新数组。用户无需先选择表中的行即可快速编辑元素。在 plunker 中 @David Blaney 的原始示例中，我只是将 app/editor.component.ts 中的整个 table 元素替换为:

<form id="bigForm">
  <table>
    <tr class='row'>
        <th class='col'>Name</th>
        <th class='col'>Job</th>
    </tr>
    <tr class='row' *ngFor="let person of model; let i = index" (click)="selectPerson(person)" >
      <td class='col'>
        <input [id]="'person.name' + i" [(ngModel)]="person.name" [name]="'person.name' + i"/>
        - {{person.name}}
      </td>
      <td class='col'>{{person.job}}</td>
    </tr>
  </table>
</form>

然后我可以在一个请求中将几个更改的行发布到 http 服务器。