すべてのチェックボックスをオフにしましたAngular2

Question

ngForループとリセットボタンから生成されるチェックボックスのリストがあります。リセットボタンをクリックすると、いずれかのチェックボックスがオンになっている場合、チェックボックスをオフにします。ここで

は私のhtml

<li *ngFor="let item of listItems" class="filter-list__item"> 
    <label class="filter-list__itemLabel"> 
     <input type="checkbox" value="{{item.id}}" [checked]="checked" /> 
     <span innerHTML="{{item.name}}"></span> 
    </label> 
</li> 
<button (click)="resetAll()"></button> 

Answer 1

であるあなたは、おそらくこのようなアイテムの状態にchecked属性をバインドします。

<li *ngFor="let item of listItems" class="filter-list__item"> 
    <label class="filter-list__itemLabel"> 
     <input type="checkbox" value="{{item.id}}" [checked]="item.checked" /> 
     <span innerHTML="{{item.name}}"></span> 
    </label> 
</li> 

<button (click)="resetAll()"></button> 

今、あなたは、リスト項目にアクセスし、以下れる偽

resetAll() { 
    this.listItems.forEach((item) => { 
    item.checked = false; 
    }) 

Answer 2

私の解決策に値をリセットするために、あなたのコンポーネントにresetAll関数を作成することができ、それが魔法のように動作：

モーダルダイアログを使用しているとします。最善の方法は、それをonClose-Observableに登録することです。次に、基本となるリストを単純にそのクローンで上書きします。 Angluarはリスト全体を再ペイントするように強制され、すべてのダニを自動的に削除します。

モーダルダイアログを使用していない場合は、上書き処理をトリガするメソッドを実装するだけです。