如何在Angular 4/5中访问多个复选框值 [英] How to access multiple checkbox values in Angular 4/5

问题描述

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

I want to get the values from my checkboxes but I can only get true or 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>

这是我的组成部分

this.categories$ = this.storeService.getAllCategories().pipe(
    map(result => (result as any).data),
    tap(r => console.log(r))
)

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

My component basically gets a list of the categories from an external api

推荐答案

您可以将更改事件与下面的复选框控件一起使用，

You can use change event with checkbox control like below,

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

从component.ts文件中，

From component.ts file,

    tempArr: any = { "brands": [] };

    onChangeCategory(event, cat: any){ // Use appropriate model type instead of any
      this.tempArr.brands.push(cat.name);

    }

这篇关于如何在Angular 4/5中访问多个复选框值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！