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

发布时间：2020-12-17 09:03:52 所属栏目：安全来源：网络整理

导读：我正试图在我的ngFor内的复选框上设置默认值. 这是我的复选框项目数组： tags = [{ name: 'Empathetic',checked: false},{ name: 'Smart money',checked: true},{ name: 'Minimal help after writing check',{ name: 'Easy term sheet',checked: true}]; 这

我正试图在我的ngFor内的复选框上设置默认值.
这是我的复选框项目数组：

tags = [{
  name: 'Empathetic',checked: false
},{
  name: 'Smart money',checked: true
},{
  name: 'Minimal help after writing check',{
  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”的不同变体,但它似乎没有做到这一点.

这解决了我选中/取消选中复选框的问题,同时我仍然可以控制变量的变化.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!