Angular - 如何根据数组中的值检查复选框？

Question

我有一个带有这些复选框的表单，以允许用户选择一个项目的多个“口径”：

Form checkbox

这些复选框是通过 ngFor 从一个名为 'calibres' 的数组中创建的，该数组具有所有可能的值，如下面的代码所示：

component.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 );
    });
  }

当我提交表单时，这个已检查元素的数组存储在后端中，用于表单创建的这个特定“项目”，因此存储的数组将类似于 [50,60]。仅选中复选框。

我要做的是在填写表单时（出于“编辑”项目的目的）检查存储在数组中的那些复选框。

我怎样才能做到这一点？

Answer 1

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

说你的口径低于型号

  calibres = [
    {value: 1, isSelected: false},
    {value: 5, isSelected: false},
    {value: 4, isSelected: false}
  ];

当你从后端得到一个数组时，只需检查一下

backendArray = [2,4];

还有一个函数可以在您获取数据后检查 isSelected 标志

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

HTML 部分使用选中属性。在更改时传递 calibre 并对 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

你不能在循环中使用属性[checked]=true。因为您为数组中的项目创建了复选框，这些项目由 ischecked 属性过滤。因此，使用此属性将完成您的工作

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