角2：デフォルトでngForのチェックボックスがオンになっています

Question

私のngForのチェックボックスにチェックを入れてデフォルト値を設定しようとしています。 これは、チェックボックス項目の私の配列である：これは私のhtml

<div class="form-group"> 
     <div class="form-check" *ngFor="let tag of tags;"> 
     <label class="form-check-label" for="tag{{tag.value}}"> 
      <input 
      class="form-check-input" 
      type="checkbox" 
      id="tag{{tag.value}}" 
      name="tagOptions" 
      [(ngModel)]="tag.checked"> 
      {{tag.name}} 
     </label> 
     </div> 
    </div> 

所望の結果は2を確認得ることです

、および2未チェックボックスである

tags = [{ 
    name: 'Empathetic', 
    checked: false 
    }, { 
    name: 'Smart money', 
    checked: true 
    }, { 
    name: 'Minimal help after writing check', 
    checked: false 
    }, { 
    name: 'Easy term sheet', 
    checked: true 
    }]; 

は、それらのすべてが未チェックです。私は[checked] = "tag.checked"とさまざまなバリエーションを試しましたが、そのトリックを行うようには見えませんでした。私はまだ私の変数の変化をコントロールしていた間、

Answer 1

、代わりにngModelのcheckedプロパティを使用しますこれは、確認/未チェックのチェックボックスと私の問題を解決しました。

HTML

<div class="form-group"> 
    <div class="form-check" *ngFor="let tag of tags; let i = index;"> 
    <label class="form-check-label" for="tag{{tag.value}}"> 
     <input 
     class="form-check-input" 
     type="checkbox" 
     id="tag{{tag.value}}" 
     name="tagOptions" 
     (change)="changeCheckbox(i)" 
     [checked]="tag.checked"> 
     {{tag.name}} 
    </label> 
    </div> 

.TS

changeCheckbox(tags, i) { 
    if (tags) { 
     this.tags[i].checked = !this.tags[i].checked; 
    } 
    } 

Answer 2

が

<div class="form-group"> 
     <div class="form-check" *ngFor="let tag of tags"> 
     <label class="form-check-label" for="tag{{tag.value}}"> 
      <input 
      class="form-check-input" 
      type="checkbox" 
      id="tag{{tag.value}}" 
      name="tagOptions" 
      [checked]="tag.checked"> 
      {{tag.name}} 
     </label> 
     </div> 
    </div> 

DEMO