角度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中的雙向綁定數組

回答

相關問題