正しく動作するチェックボックスのグループ

Question

私は多くを検索しましたが、私が探している正解を見つけることができませんでした。 チェックボックスをチェックすると正しく動作し、divタグに表示されるようなフォームのチェックボックスのグループが必要です。

export class MyComponent { 
options = [ 
{name:'OptionA', value:'1', checked:true}, 
{name:'OptionB', value:'2', checked:false}, 
{name:'OptionC', value:'3', checked:true} 
] 
get selectedOptions() { // right now: ['1','3'] 
return this.options 
      .filter(opt => opt.checked) 
      .map(opt => opt.value) 
    } 
} 

とhtml：

<div class="form-group"> 
<label for="options">Options:</label> 
<div *ngFor="let option of options"> 
    <label> 
     <input type="checkbox" 
       name="options" 
       value="{{option.value}}" 
       [(ngModel)]="option.checked"/> 
     {{option.name}} 
    </label> 
</div> 

が、私はcheckedプロパティを自分で与えられ、ユーザーが変更した場合、それは動作しませんので、それは正しくないだと確信しています。 チェックボックスの簡単なコードを記述してもらえますか？ ありがとうございます。

Answer 1

あなたはまた(change)イベントにngModelだけバインド値を削除し、[checked]属性を設定する必要があります。

<label> 
    <input type="checkbox" 
      name="options" 
      value="{{option.value}}" 
      [checked]="option.checked" 
      (change)="option.checked = !option.checked"/> 
    {{option.name}} 
</label>