（変更）が機能しない

私は角度4を使用しており、ループ内に作成されたチェックボックスがたくさんあります。私が個別にクリックすると、(change)はうまく動作しますが、すべてを選択するとcheckboxが選択されますが、個々のチェックボックスの入力にはchangeが発生しません。（変更）が機能しない

私に教えてください。現在、各inputの値はsc.idに設定されています。 (change)がトリガされたときに配列に追加する予定でしたが、すべてを選択しても機能しません。

私は間違っていますか？誰もがより良い提案を持っている場合、私は私はあなたが希望を達成するために[(ngModel)]を使用する必要があります https://embed.plnkr.co/TFxziXAEeutvLZ5rUXZS/

出典

2017-11-09 derrickrozay

問題を再現するためにplunkerを作成

HTML

<input type="checkbox" class="custom-control-input" (change)="allSelected = !allSelected"> 

<div *ngFor="let sc of scs?.data"> 
    <input type="checkbox" class="custom-control-input" [value]="sc.id" [checked]="allSelected" (change)="onSCSelect($event)"> 
</div>

コンポーネント

allSelected = false; 

onSCSelect(event) { 
    console.log(event); 
    }

教えてください結果。問題は、 `scs`配列がやって来るされていることである

https://plnkr.co/edit/uSsI5YnBYShyIykAI7Vs?p=preview

出典

2017-11-09 01:43:04

：

select all <input type="checkbox" class="custom-control-input" [(ngModel)]="allSelected" (ngModelChange)="onAllSelectedChanged($event)"> <br/> <div *ngFor="let sc of scs"> <input type="checkbox" class="custom-control-input" [(ngModel)]="sc.checked" (ngModelChange)="onSelectionChanged($event)"> </div>

export class AppComponent { allSelected = false; scs = [ {id: 1}, {id: 2}, {id: 4} ]; onAllSelectedChanged($event) { for(let i=0; i<this.scs.length; i++) { this.scs[i].checked = this.allSelected; } } onSelectionChanged(isSelected) { if (!isSelected) { this.allSelected = false; } } }

は、詳細については、更新plunkerを参照してください

HTML gをデータベースから削除して、 'checked'プロパティがない場合 – derrickrozay

+0

クライアント上で簡単に拡張できます。一度それを取得し、そのプロパティを追加するだけでそれを繰り返します。 –

+0

角度2/4/5で正しい方法です。 –

答えて

関連する問題