web-dev-qa-db-ja.com

Angular 2：ngForのチェックボックスがデフォルトでチェックされています

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

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

これは私の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つの未チェックボックスを取得することですが、それらはすべてチェックされていません。また、[checked] = "tag.checked"でさまざまなバリエーションを試しましたが、うまくいかないようでした。

angulartypescriptcheckboxngforangular2-ngmodel
9
Martin Brandhaug

これにより、チェックボックスのチェック/チェック解除の問題が解決しましたが、変数の変更を制御できました。

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;
    }
  }
17
Martin Brandhaug

NgModelの代わりにcheckedプロパティを使用し、

 <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 [〜＃〜]

5
Sajeetharan

私はこれが古いスレッドであることを知っていますが、最近同様の問題に遭遇しました、問題は名前タグにあります、それはすべてのチェックボックスで同じであり、フォームは文句を言うので、たとえば次のように使用できます：

<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]="tag.name"
        [(ngModel)]="tag.checked">
      {{tag.name}}
    </label>
  </div>
</div>
2
Cornelius

この質問は私の脳の健康を救います。しかし、私は正しい答えで「アップグレード」を行いました：

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($event, i)"
            [checked]="tag.checked">
          {{tag.name}}
        </label>
      </div>

TS：

changeCheckbox(event, index){
      this.tags[index] = event.target.checked;
    }
1
nardocesar

代わりにidとして名前タグを使用します。

   <label class="form-check-label" for="tag{{tag.value}}">
      <input
        class="form-check-input"
        type="checkbox"
        id="tag{{tag.value}}"
        name="tag{{tag.value}}"
        [(ngModel)]="tag.checked">
      {{tag.name}}
    </label>
0
J. Jerez