Angular 2中的双向绑定数组

Question

我知道angular 2中基本的双向绑定，就像文档中展示的那样。

我有一个person数组，我正在使用它来构建一个html列表：

现在，当我点击一个人的行时，我可以使用双向绑定进行编辑：

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

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

现在，我想要的是对列表本身进行双向绑定：（该列表位于与行编辑器不同的视图中）

 <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)]。

基本上，我希望我的列表视图在无需刷新页面的情况下更新。如何使ngFor中使用的model监听更改？

- Snowman

---

你是想将你的 model 与另一个组件共享，还是 'list' 在同一个组件定义中作为你的行编辑器？ - David Blaney

Answer 1

感谢@David Blaney的帮助。 我不确定是否可以发表它。 我只想扩展你的示例，以在表格中直接对每行进行双向绑定数组的编辑 - Angular会负责在用户直接在表格中的“输入元素”中编写时更新数组。用户可以快速编辑元素，而无需先选择表格中的行。在@David Blaney在plunker中的原始示例中，我只是用这个替换了table元素在app/editor.component.ts中的全部内容：

<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 服务器发布多个已更改的行。

- vlakov

---

谢谢回答。+1。我会在有机会的时候试一下。 - Snowman

这正是我所期望的解决方案。对于其他想要在同一组件模板中使用数据绑定的人来说，[(ngModel)] 是最好的选择。 - Suyog

Answer 2

这是一个示例的 Plunker，演示了如何将你的 model 变量绑定到另一个组件：

https://plnkr.co/edit/tM20HcUIx13ZUPh0faTB?p=preview

我从你上面的代码中创建了一个简单的列表组件：

import { Component, Input  } from '@angular/core';

import { Person } from './person';

@Component({
  selector: 'my-list',
  template:`
    <h3>The List</h3>
    <tr class='row' *ngFor="let person of model">
      <td class='col'>{{person.name}}</td>
      <td class='col'>{{person.job}}</td>
    </tr>
})

export class List {
  @Input() model:Array<Person>;  
}

Input 装饰器用于让组件知道应该期望这种类型的输入，并在该组件的范围内使用它。

在编辑器组件的模板中，我使用了 my-list 指令，并将指令的 model 输入设置为编辑器组件中的 model。 <my-list [model]="model" ></my-list> 现在，任何对 model 的更改都会反映在子列表组件中。

如果您想要通知不是编辑器组件子级的组件，您需要使用 @Output 装饰器并设置一个 EventEmitter，该监听器可以绑定到并用于在其他位置更新列表。

请查看此处的文档： https://angular.io/docs/ts/latest/cookbook/component-communication.html

- David Blaney

---

谢谢回答。我会尝试并告诉你结果。+1 - Snowman

谢谢伙计。这个例子 https://plnkr.co/edit/tM20HcUIx13ZUPh0faTB?p=preview 帮了我很多。 - ruchit

Answer 3

你不需要做任何事情来观察数组的变化。Angular会处理。

这是你问题的工作示例。ngFor example

- Thaadikkaaran

---

谢谢回答。我会尝试并告诉你结果。+1。 - Snowman

Angular 的示例代码确实可以对数组进行双向绑定，但它并没有展示如何在数组元素级别上进行双向绑定。 - ATL_DEV