角度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听取更改？

来源

2016-10-03 Snowman

您是否试图与另一个组件共享“模型”，或者是与行编辑器相同组件定义中的“列表”？ –

你不想做任何事情来观看阵列变化。 Angular保重。

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

来源

2016-10-03 13:49:26 Thaadikkaaran

感谢您的回答。我会尝试并让你知道。 +1。 – Snowman

下面是如何在你的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

来源

2016-10-03 15:17:00

感谢您的回答。我会尝试并让你知道。 +1 – Snowman

感谢哥们。这个例子https://plnkr.co/edit/tM20HcUIx13ZUPh0faTB?p=preview帮助我。 – ruchit07

感谢@大卫布莱尼。我不确定我是否可以发布。我只想扩展你的例子，直接在表中的每一行上编辑带双向绑定数组的网格/编辑表 - 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服务器一个请求。

来源

2017-09-28 01:20:23 vlakov

感谢您的回答。 +1。我会尽可能地尝试。 – Snowman

角度2中的双向绑定数组

回答

相关问题