Angular 2：ngFor中的复选框默认选中

Posted 2023-02-22

【中文标题】Angular 2：ngFor中的复选框默认选中

【英文标题】：Angular 2: Default checked on checkbox in ngFor

【发布时间】：2017-12-18 18:41:09

【问题描述】：

我正在尝试将默认值设置为在我的 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="tagtag.value">
      <input
        class="form-check-input"
        type="checkbox"
        id="tagtag.value"
        name="tagOptions"
        [(ngModel)]="tag.checked">
      tag.name
    </label>
  </div>
</div>

期望的结果是选中 2 个复选框和未选中的 2 个复选框，但它们都未选中。我还尝试了 [checked]="tag.checked" 的不同变体，但似乎没有奏效。

【问题讨论】：

我将您的代码复制到生成的 ng 项目中并且可以正常工作，我认为您的代码没有问题..

【参考方案1】：

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

HTML

<div class="form-group">
  <div class="form-check" *ngFor="let tag of tags; let i = index;">
    <label class="form-check-label" for="tagtag.value">
      <input
        class="form-check-input"
        type="checkbox"
        id="tagtag.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;
    
  

【讨论】：

那是我之前发过的答案，为什么你又发一个答案？

你没有 (change)="changeCheckbox(i)"

你不应该在 (change)="changeCheckbox(i)" 中传递标签参数吗？

【参考方案2】：

使用checked属性代替ngModel，

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

DEMO

【讨论】：

没错，这回答了我的问题。但是，这会导致另一个问题：如果我取消选中或选中任何复选框，则不会注册更改。

【参考方案3】：

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

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

【参考方案4】：

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

HTML：

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

TS：

changeCheckbox(event, index)
      this.tags[index] = event.target.checked;
    

【参考方案5】：

使用名称标签作为 id：

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