角度2、チェックボックス双方向モデルは、結合、Iは、チェックボックスのシリーズを持っている

Question

Plunkerパー成分の中から状態の操作にチェック状態を反映しないDOM：

<label><input type="checkbox" name="foo" [(ngModel)]="foo" (change)="changed()">Foo</label> 
<label><input type="checkbox" name="bar" [(ngModel)]="bar" (change)="changed()">Bar</label> 
<label><input type="checkbox" name="baz" [(ngModel)]="baz" (change)="changed()">Baz</label> 

オン3つのチェックボックスをすべてチェックすると、チェックボックスがオフになります。

changed() { 
    if (this.foo && this.bar && this.baz) { 
    this.foo = false; 
    this.bar = false; 
    this.baz = false; 
    } 

    console.log(`foo: ${this.foo};bar: ${this.bar};baz: ${this.baz}`) 
} 

代わりに、その間に3番目のチェックボックスをチェックすると、モデルはfalseに更新されますが、チェックボックスはUIでチェックされたままになり、同期が外れます。

今のところ私はイベントを渡し、ターゲットdom要素のチェックされた状態を自分自身で切り替えることで修正しました。しかし、どうやって同期が外れてしまうのだろうか？より良い解決策はありますか？

Answer 1

値がfalseであり、あなたがtrueに値を変更するには、チェックボックスをクリックして、イベントハンドラが戻っfalseにそれを変更し、その後、角度変化の検出は、変更を確認しないとバインディングを更新していない場合は（チェックボックスの値はtrueのままです）。

constructor(private cdRef:ChangeDetectorRef) {} 

changed() { 
    this.cdRef.detectChanges(); 
    if (this.foo && this.bar && this.baz) { 
    this.foo = false; 
    this.bar = false; 
    this.baz = false; 
    } 
    console.log(`foo: ${this.foo};bar: ${this.bar};baz: ${this.baz}`) 
} 

Plunker example