角型チェックボックスがモデル値を保持していない

Question

データモデルのブール値を反映させるための値が必要なチェックボックスがあり、ユーザーが変更しようとする試みを無視します。

ここ

は私のセットアップの例です：私が試してみました、さまざまな入力で

データモデル

const item = {label: 'test', active: false, selected: false}; 

テンプレート：

<li (click)="item.selected = !item.selected" [class.selected]="item.selected"> 
    <input type="checkbox" [ngModel]="item.active"> 
    <input type="checkbox" [value]="item.active"> 
    <input type="checkbox" [checked]="item.active"> 
    {{item.label}} 
</li> 

データにおけるアクティブな状態がされていないので変更された（2ウェイバインドされていない）私はチェックボックスがユーザーがチェックしようとしているにもかかわらず、チェックされていない状態にとどまると思います。

ただし、これは該当しません。ユーザはまだボックスをチェックすることができ、アクティブ状態は依然として偽であるが、選択状態は変化する。そのモデルが変更されたときに、チェックボックスのDOM状態がモデルと異なることを変更検出が妨げているのは何ですか？

変更検出は特定のDOM要素のみを監視し、アクティブな状態は変更されていないため、DOMに影響がないと想定していますか？

どのようにしてこの変更を確認し、それに応じてモデル値を利用するのですか？

Answer 1

チェックボックスを無効にすることをお勧めします。チェックボックスがDOM内で切り替わるのを止めること。

<input type="checkbox" [ngModel]="item.active" (click)="false">{{item.label}} 

ここでは、Plunker Demoです。

Answer 2

は、私はちょうどあなたがinputタグで(click)="false"を追加することができ、すべて一緒に

<input type="checkbox" [ngModel]="item.active" disabled="true">