10

我正在尝试将默认值设置为在我的 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" 的不同变体，但似乎没有奏效。

4

5 回答 5

22

这解决了我选中/未选中复选框的问题，同时我仍然可以控制变量的更改。

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;
    }
  }
于 2017-07-13T20:49:45.630 回答
6

使用 checked 属性而不是 ngModel，

 <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>

演示

于 2017-07-13T20:13:16.630 回答
3

我知道这是一个旧线程，但我最近遇到了类似的问题，问题出在名称标签上，因为每个复选框都相同，表单抱怨，您可以按如下方式使用它：

<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>
于 2018-12-10T04:04:18.433 回答
1

这个问题拯救了我的大脑健康哈哈。但是我在正确答案中做了“升级”：

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;
    }
于 2018-08-15T17:26:32.037 回答
1

使用名称标签作为 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>
于 2019-03-04T10:36:42.103 回答