動的チェックボックスを作成するangular2 typescript

Question

私のフォームにはデフォルトで4つのチェックボックスがあり、テキストボックスと追加ボタンがあります。テキストボックスにテキストを入力して[追加]ボタンをクリックすると、チェックボックスを動的に作成する必要があります。次のコードは正常に動作しますが、動的チェックボックスはデフォルトでオンになっています。チェックの有無にかかわらず、どのようにデフォルト値を設定できますか？

<div class="checkbox abc-checkbox abc-checkbox-primary" *ngFor='let i of arrayofLevels' > 
                    <input id={{i.event_name}} type="checkbox" value = {{i.event_name}} (change)="checkAndCheck(i)" formControlName="event_name" ng-checked=false/> 
                    <label for={{i.event_name}}> {{i.event_name}} </label> 
</div> 

[追加]ボタンをクリックしている間、新しい値をarrayofLevels配列にプッシュしています。

arrayofLevels:eventDetails[] =[{event_id:1, event_name:"Form1"},{event_id:2, event_name:"Form2"}, {event_id:3, event_name:"Form3"}, {event_id:4, event_name:"Form4"}] 

let newEvent = {event_id:resDataFilter.event_id, event_name:resDataFilter.event_name} 

this.arrayofLevels.push（newEvent）;

Answer 1

HTML checked属性自体の一方向バインディングを使用してchecked状態を設定してみてください。あなたは、例えばcheckedArray = [false,false,false,false]) that maintains theは、そのコレクションを使用して外部から各チェックボックスのstates. You can then manage and update the checked`状態をチェックする（コレクションに、各チェックボックスのchecked属性をバインドすることができます。

あなたのテンプレートコードは、その後[attr.checked]=checkedArray[index]と同様である。とき、インデックスがアクセス可能であることに注意してください追加ボタンを更新して、対応する新しく追加されたチェックボックスのcheckedArrayに新しいエントリを追加します。