Question

我知道角度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人。有什么方法可以进行角度检测并相应地添加行？ [(ngModel)]似乎不适用于此。

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

Answer 1

以下是如何将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 2

感谢@David Blaney。我不确定我是否可以发布它。我只想扩展你的例子，直接在表格的每一行上用双向绑定数组编辑网格/编辑表 - 当用户直接在＆＃34;输入元素中写入时，angular正在处理更新数组。表＆＃34 ;.用户可以快速编辑元素，而无需先选择表格中的行。在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 3

你不想做任何事情来观察阵列变化。 Angular需要注意。

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

角度为2的双向绑定数组

3 个答案: