如何访问Angular 4/5中的多个复选框值

我想从我的复选框中获取值，但我只能得到true或false

这是我的模板：

<h4>Categories</h4>
<div class="form-check" *ngFor="let cat of categories$|async">
    <input class="form-check-input" [(ngModel)]="cat.id" name="{{ cat.name }}" type="checkbox" id="{{cat.name}}">
    <label class="form-check-label" for="{{cat.name}}">
        {{cat.name}}
    </label>
</div>

我的组件基本上从外部api获取一个类别列表

---

您希望从复选框中获取值。复选框表示布尔值。因此，您应该获得

true

和

false

。

您可以将更改事件与复选框控件一起使用，如下所示

<div class="form-check" *ngFor="let cat of categories$|async">
    <input class="form-check-input" [(ngModel)]="cat.id" name="{{ cat.name }}" type="checkbox" id="{{cat.name}}" (change)="onChangeCategory($event, cat)">
    <label class="form-check-label" for="{{cat.name}}">
        {{cat.name}}
    </label>
</div>

---

单击复选框时，只需使用

change

事件即可获得事件，如下所示-

<div class="form-check" *ngFor="let cat of categories">
    <input class="form-check-input" (change)="onChange(cat.name, $event.target.checked)"name="{{ cat.name }}" type="checkbox" id="{{cat.name}}">
    <label class="form-check-label" for="{{cat.name}}">
        {{cat.name}}
    </label>
</div>

onChange(email:string, isChecked: boolean) {
      if(isChecked) {
        this.emailFormArray.push(email);
      } else {
        let index = this.emailFormArray.indexOf(email);
        this.emailFormArray.splice(index,1);
      }
  }

---

选中此角度字体脚本

更新HTML模板

  <ul class="checkbox-items">
    <li *ngFor="let item of checkboxesDataList">
      <input type="checkbox" [(ngModel)]="item.isChecked" (change)="changeSelection()">{{item.label}}
    </li>
  </ul>

---

不需要使用事件更改和辅助变量来存储数组。您可以简单地使用getter来获取值

如果我们使用as[（ngModel）]“cat.isChecked”

<div class="form-check" *ngFor="let cat of categories">
    <input class="form-check-input" [(ngModel)]="cat.isChecked" name="{{ cat.name }}" type="checkbox" id="{{cat.name}}">
    <label class="form-check-label" for="{{cat.name}}">
        {{cat.name}}
    </label>
</div>

如果我们需要“全部检查”，我们可以使用

<input #checkAll type="checkbox" (change)="selectAll(checkAll.checked)">

  selectAll(checked:any)
  {
    this.categories.forEach(x=>x.isChecked=checked)
  }

选择全部（选中：任何）
{
this.categories.forEach（x=>x.isChecked=checked）
}

---

请参见

您的意思是，当您选中带有“Tom Ford”的复选框时，您应该将“Tom Ford”作为值，而不是

true

或

false

？我希望我的数据像这样品牌：Tom Ford或品牌的id尝试绑定名称像这样

[（ngModel）]=“cat.name”

因为

复选框

接受要检查或取消检查的布尔值。因此，您不能选中“名称”作为值。您可以使用在检查更改时触发的

{change）

方法来执行必要的操作。我真正想要的是一个类似的数组：{“brands”：[“Tom Ford”，“Rolex”]}谢谢，这正是我所寻找的，我正在使用indexOf来不添加重复项。如果我希望所有复选框在开始时都为false，那该怎么办？您的示例可以运行，但我在视图中没有看到复选框？请在视图中正确绑定，并尝试使用

|json

管道打印视图中的json部分。我如何一次选中所有复选框？@Santosh p请检查更新的答案和Stackblitzexample@PardeepJain，我们应该避免在Angular中使用querySelectorAll（如果不必要的话）。Angular使用关系模型（在.ts中的变量）和视图（在.html中）。因此“Angular方式”是使用[（ngModel）]或被动形式，请参阅我的回答您在回答中使用的好方法。

  <ul class="checkbox-items">
    <li *ngFor="let item of checkboxesDataList">
      <input type="checkbox" [(ngModel)]="item.isChecked" (change)="changeSelection()">{{item.label}}
    </li>
  </ul>

  checkboxesDataList = [
    {
      id: 'C001',
      label: 'Photography',
      isChecked: true
    },
    {
      id: 'C002',
      label: 'Writing',
      isChecked: true
    },
    {
      id: 'C003',
      label: 'Painting',
      isChecked: true
    },
    {
      id: 'C004',
      label: 'Knitting',
      isChecked: false
    },
    {
      id: 'C004',
      label: 'Dancing',
      isChecked: false
    },
    {
      id: 'C005',
      label: 'Gardening',
      isChecked: true
    },
    {
      id: 'C006',
      label: 'Drawing',
      isChecked: true
    },
    {
      id: 'C007',
      label: 'Gyming',
      isChecked: false
    },
    {
      id: 'C008',
      label: 'Cooking',
      isChecked: true
    },
    {
      id: 'C009',
      label: 'Scrapbooking',
      isChecked: false
    },
    {
      id: 'C010',
      label: 'Origami',
      isChecked: false
    }
  ]


  // Selected item
  fetchSelectedItems() {
    this.selectedItemsList = this.checkboxesDataList.filter((value, index) => {
      return value.isChecked
    });
  }

  // IDs of selected item
  fetchCheckedIDs() {
    this.checkedIDs = []
    this.checkboxesDataList.forEach((value, index) => {
      if (value.isChecked) {
        this.checkedIDs.push(value.id);
      }
    });
  }

<div class="form-check" *ngFor="let cat of categories">
    <input class="form-check-input" [(ngModel)]="cat.isChecked" name="{{ cat.name }}" type="checkbox" id="{{cat.name}}">
    <label class="form-check-label" for="{{cat.name}}">
        {{cat.name}}
    </label>
</div>

get values()
{
    return this.categories.filter(x=>x.isChecked).map(x=>x.id)
}

<input #checkAll type="checkbox" (change)="selectAll(checkAll.checked)">

  selectAll(checked:any)
  {
    this.categories.forEach(x=>x.isChecked=checked)
  }