web-dev-qa-db-ja.com

angular 2の双方向バインディング配列

ドキュメントに示されているように、angular 2）の基本的な双方向バインディングを認識しています。

personsの配列があり、これを使用して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が2人の配列の場合、2行になります。 modelが3人または4人に変更される場合があります。 angularこれを検出し、それに応じて行を追加する方法はありますか？[(ngModel)]はここでは適用できないようです。

基本的に、ページを更新せずにリストビューを更新したいと思います。 modelで使用されるngForに変更をリッスンさせるにはどうすればよいですか？

angularangular2-directives
6
Snowman

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

3
David Blaney

@DavidBlaneyに感謝します。投稿できるかわかりません。私はあなたの例を拡張して、テーブルのすべての行に直接双方向バインディング配列を使用してグリッド/編集テーブルを編集したかっただけです-angularは、ユーザーが書き込みを行っているときに配列の更新を処理しています「テーブルに直接要素を入力」。ユーザーは、最初にテーブルの行を選択しなくても、要素をすばやく編集できます。プランカーの@David Blaneyの元の例では、-のtable要素全体を置き換えました。 app/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>

次に、1つのリクエストで複数の変更された行をhttpサーバーに投稿できます。

2
vlakov

アレイの変更を監視するために何もしたくありません。 Angularお世話になります。

これがあなたの問題の実際の例です。 ngたとえば

1
Thaadikkaaran