角度 - 如何根据数组中的值选中复选框？

Question

我有一个包含这些复选框的表单，以允许用户选择一个项目的多个“口径”：“表单”复选框这些复选框是通过ngFor从名为“calibres”的数组中创建的，该数组具有所有可能的值，如下面的代码所示：组件.html<div >      <mat-checkbox #checkBox      *ngFor="let calibre of calibres; let i = index"      [value]="calibre"      (change)="getCheckbox()"      class="example-margin mb-0 mt-1" >{{calibre}}</mat-checkbox></div>component.ts 上的 getCheckbox（） 函数创建一个数组，其中包含在我的复选框中选中的元素  getCheckbox() {    this.item.calibres = [];    const checked = this.checkBox.filter(checkbox => checkbox.checked);    checked.forEach(data => {         this.item.calibres.push ( data.value );    });  }当我提交表单时，这个选中的elemets数组存储在后端，用于表单创建的这个特定的“项目”，因此存储的数组将类似于[ 50，60 ]。仅选中复选框。我试图做的是在填写表单的那一刻（用于项目“编辑”目的）是选中那些存储在数组中的复选框。我怎样才能做到这一点？

Answer 1

如果您使用的是模型，那么这将非常容易和干净。

假设您的机芯低于型号

  calibres = [

    {value: 1, isSelected: false},

    {value: 5, isSelected: false},

    {value: 4, isSelected: false}

  ];

当您从后端获得数组时，只需检查例如

backendArray = [2,4];

和一个函数检查是获取数据后选择的标志

this.calibres = this.calibres.map(

      (elem) =>{ elem.isSelected = this.backendArray.indexOf(elem.value) != -1 ? true : false;

    return elem});

HTML 部分使用选中的属性。更改时传递口径，并将切换逻辑设置为 isSelected 标志

<div >

      <mat-checkbox #checkBox

      *ngFor="let calibre of calibres"

      [checked]="calibre.isSelected"

      [value]="calibre.value"

      (change)="getCheckbox(calibre)"

      class="example-margin mb-0 mt-1" >{{calibre.value}}</mat-checkbox>

</div>

Answer 2

不能在循环中使用属性。因为您为数组中按 ischeck 属性筛选的项目创建复选框。因此，使用此属性将完成您的工作[checked]=true

 <mat-checkbox #checkBox

      *ngFor="let calibre of calibres; let i = index"

      [value]="calibre"

      [checked]="true"

      (change)="getCheckbox()"

      class="example-margin mb-0 mt-1" >{{calibre}}</mat-checkbox>

更新：

 getCheckbox() {

     this.item.calibres = this.checkBox.map(checkbox  => {

            return {

               value: checkbox.value,

               isChecked: checkbox.checked

            };

        }); 

  }

<mat-checkbox #checkBox

      *ngFor="let calibre of calibres; let i = index"

      [value]="calibre.value"

      [checked]="calibre.isChecked"

      (change)="getCheckbox()"

      class="example-margin mb-0 mt-1" >{{calibre.value}}</mat-checkbox>

Answer 3

希望这可以帮助将来的人，

我通过属性绑定和一个小函数以简单的方式解决了这个问题。

问题：我有一个数组，其值仅为选中的复选框，当用户想要编辑它时，我必须再次显示复选框，并且复选框已选中。Ex: Categories = ["a","d"]

溶液：

在 HTML 文件中 - 将属性绑定与一个函数结合使用，该函数检查数组中是否存在值并返回 true 或 false。（您也可以使用 *ngFor）

  <h3>Category</h3>

  <label><input type="checkbox" [checked]="checkCat('a')">a</label>

  <label><input type="checkbox" [checked]="checkCat('b')">b</label>

  <label><input type="checkbox" [checked]="checkCat('c')">c</label>

  <label><input type="checkbox" [checked]="checkCat('d')">d</label>

在 .ts 文件内

cat = ["a","d"]; // checkbox data received from backend

 checkCat(data){

    let ref = this.cat.find(x => x == data); // this checks the cat[] array

    if(ref == data){

      return true;

    } else {

      return false;

    }

   }