angular 2 中的双向绑定数组

Question

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

我有一个 persons 数组，我用它来构建一个 html 列表：

现在，当我点击一个人的行时，我可以使用 2-way binding 对其进行编辑：

 <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 人。有什么办法可以让角度检测到这一点并相应地添加行？ [(ngModel)] 似乎不适用于这里。

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

Answer 1

感谢@David Blaney。 我不确定我是否可以发布它。 我只想将您的示例扩展为直接在表中的每一行上使用双向绑定数组编辑网格/编辑表 - 当用户在“直接在表中的输入元素”中写入时，角度负责更新数组。用户无需先选择表格中的行即可快速编辑元素。在 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 服务器。

Answer 2

下面是一个例子，说明如何将 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 指令，并将指令的模型输入设置为编辑器组件中的模型。

<my-list [model]="model" ></my-list>

现在，这可以让对模型的任何更改都反映在子列表组件中。

如果您希望通知一个不是编辑器组件子组件的组件，您需要使用@Output 装饰器并设置一个EventEmitter 可以绑定一个侦听器，然后用于更新在别处列出。

在此处查看文档：

https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 3

你不想做任何事情来观察数组的变化。 Angular 负责。

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