チェックボックスの状態が角2のngModelの値を反映していない

Question

私の問題は、その状態がngModelの値を反映していないチェックボックスがあることです。 アーキテクチャを説明しましょう：製品のリストを管理するサービスと、このリストを表示してユーザーが任意の製品を選択または選択解除できるようにするコンポーネントがあります。ユーザーが商品の選択を解除し、選択した商品がなくなった場合は、すべてを再選択しようとします。しかし、これを行うと、イベントをトリガーするチェックボックスは更新されません（ngModelはグラフィカルなので）。他のすべてのチェックボックスは正しく更新されます。

だからここにサービス（私のコンポーネントは、その変更内容を聞くことができるように、私はBehaviourSubjectを使用）されています。それは、compoenentそれを自己のため

<li *ngFor="let product of ProductService.products | async"> 
     {{product.name}}{{product.selected}} 
     <input type="checkbox" [(ngModel)]="product.selected" (ngModelChange)="ProductService.select(product.name)"> 
</li> 

：

@Injectable() 
export class ProductService { 
    private productsSubject: BehaviorSubject<Array<{name: string, selected: boolean}>> 
    public products = this.productsSubject.asObservable(); 

    constructor() { 
     this.productsSubject.next([ 
      {name: 'Product 1', selected: true}, 
      {name: 'Product 2', selected: true}, 
      {name: 'Product 3', selected: true} 
     ]); 
    } 

    public select(name: string) { 
     // In this method I change "selected" for the corresponding product. 
     // if no product is selected, I select them all. 
    } 
} 

ここでは、コンポーネント図、 ProductServiceの注入以外は特に何もしません。

最後に、私がアプリケーションを実行すると、すべてチェックボックスをオンまたはオフにして、モデルが更新され、チェックボックスの状態も正しく動作します。

スタート1つの状況を除い：

Product 1 -> selected: true + checkbox **NOT-TICKED** 
Product 2 -> selected: true + checkbox ticked, 
Product 3 -> selected: true + checkbox ticked 

はあなたを行います

Product 1 -> selected: true + checkbox ticked 
Product 2 -> selected: false + checkbox not-ticked 
Product 3 -> selected: false + checkbox not-ticked 

私は、この方法は、すべての製品を選択し直すのその仕事をして、私はこれを持っている「を選択し、」最初の製品のチェックを外しますイベントをトリガーするチェックボックスがグラフィカルに更新されない理由を知っていますか？

ご協力いただきありがとうございます。結合

Answer 1

現在使用している一方通行のデータ：バインディング

[ngModel]="product.selected" 

使用双方向データ：

[(ngModel)]="product.selected" 

はそれほど変化は、あなたのUIに反映されます。