如何获取角形材质中的复选框数据 [英] How to get checkbox data in angular material

问题描述

我想在用户选择时获取所有复选框项，现在正在获取数据，但问题是该复选框没有更改，我的意思是当我单击该复选框时，如果选中了初始状态，则始终保留选中，反之亦然.

I want to get the all checkboxes items when user selects, now am getting the data But the problem is that the checkbox don't change, I mean that when I click the checkbox, if the initial state is checked, always remain checked and vice versa.

this.settings_data = ["one", "two", "three", "four", "five"];

<div class="settings_head" fxFlex="50" *ngFor="let item of settings_data">
  <mat-checkbox formControlName="settingsCheckboxvalues" (ngModelChange)="seleteditems($event,item)">{{item}}</mat-checkbox>
</div>



seleteditems(event, value) {
  this.allitems.push(value);
}

推荐答案

我认为您过于复杂.

修改数组，使每个条目都具有name和checked属性，并使用[(ngModel)]

Modify your array so that each entry has a name and a checked property, and bind the checkboxes to them with [(ngModel)]

ts

array = [
    {
      name: 'one',
      checked: false
    },
    {
      name: 'two',
      checked: false
    },
    {
      name: 'three',
      checked: false
    },
    {
      name: 'four',
      checked: false
    },
    {
      name: 'five',
      checked: false
    }
  ]
  getCheckboxes() {
    console.log(this.array.filter(x => x.checked === true).map(x => x.name));
  }

---

html

<div *ngFor="let item of array">
    <mat-checkbox [(ngModel)]="item.checked" (change)="getCheckboxes()">{{item.name}}</mat-checkbox>
</div>

---

演示

这篇关于如何获取角形材质中的复选框数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！