角度2中的双向绑定数组
我知道在角度2中使用基本的双向绑定,如文档中所示。角度2中的双向绑定数组
我有person
s,这我使用建立一个HTML列表的数组:
现在,当我点击一个人的行,我可以使用2路结合编辑现在
<form>
<label>Name: </label>
<input [(ngModel)]="selectedPerson.name" name="name"/>
<label>Description: </label>
<input [(ngModel)]="selectedPerson.job" name="job"/>
</form>
,我要的是2路绑定列表本身:(这份名单是在比行编辑器有不同的看法)
<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
听取更改?
下面是如何在你的model
变量绑定到另一个组件的例子的plunker:
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>;
}
:
https://plnkr.co/edit/tM20HcUIx13ZUPh0faTB?p=preview
我从你上面的代码中创建一个简单的列表组件
Input
修饰器让组件知道这个类型的期望和输入,并将它用在这个组件的范围中。
在编辑器组件的模板中,我使用了my-list
指令,并将指令的模型输入设置为编辑器组件中的模型。
<my-list [model]="model" ></my-list>
现在,这让对模型进行任何更改诠释他的孩子列表组件中反映出来。
如果您想要通知不是编辑器组件的子组件的组件,您需要使用@Output
装饰器并设置一个可以绑定侦听器然后用于其他位置更新列表的EventEmitter
。
看看这里的文档:
https://angular.io/docs/ts/latest/cookbook/component-communication.html
感谢@大卫布莱尼。 我不确定我是否可以发布。 我只想扩展你的例子,直接在表中的每一行上编辑带双向绑定数组的网格/编辑表 - angular正在照顾更新数组,因为用户在“直接在表中输入元素” 。用户可以快速编辑元素,而不必先选择表格中的行。在plunker我刚刚更换了整个table
元素应用@大卫布莱尼的最初的例子/ 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服务器一个请求。
感谢您的回答。 +1。我会尽可能地尝试。 – Snowman
您是否试图与另一个组件共享“模型”,或者是与行编辑器相同组件定义中的“列表”? –