アレイアップデートの背後にあるAngular2メカニズム

Question

私はAngular2を使い始めました。私はコンポーネント間のオブザーバブルとデータ交換の概念を把握しようとしています。

ユーザーがフォームにデータを入力できるコードをいくつか作成しました。

<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)"> 
     <div class="form-group"> 
     <input type="string" class="form-control" id="someValue" [formControl]="myForm.controls['someValue']"> 
     </div> 
    <button type="submit">Submit</button> 
</form> 

このアクションべき：

1. 更新要素

   <ul> <li *ngFor="let val of valsList"> {{ val.someValue }} </li</ul> 
   

2. のリスト要素

   のカウンタを表示{{カウンタ}}

私は、私が持っているものの例を持つPlunkerを作成しました。

http://plnkr.co/edit/pkIpmdS2uOmb7Rf4FfAH?p=preview

リストが自動的に更新なっている理由今、私は理解していない事があります。何らかの拘束力のある仕事がなければなりませんが、何を正確にしますか？

同様のアプローチのカウンタは機能しません。

よろしくお願いいたします。

Answer 1

あなたはそれが直接valsListに結合されたとして、あなたのグリッドが更新されるので、valsListにオブジェクトを推進しているあなたはPlunkerでhere

を見ても、相互作用がどのように動作するかのコンポーネントの詳細を知るためには、あなたのアプリケーションで観察使用していませんオブジェクト。

counterの場合、別のインスタンスを作成して更新しているため、カウンタコンポーネントは値を取得していません。

（あなただけの既存のオブジェクトを更新カウンタの新しいinstaceを作成していないよう）あなたは

を対象にカウンタラップし、それが動作するコンポーネントでそれを使用する場合は、この​​をチェックしてください!!

これが役立ちますように！