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

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

如果您使用的是模型，那么这将非常容易和干净。假设您的机芯低于型号&nbsp; calibres = [&nbsp; &nbsp; {value: 1, isSelected: false},&nbsp; &nbsp; {value: 5, isSelected: false},&nbsp; &nbsp; {value: 4, isSelected: false}&nbsp; ];当您从后端获得数组时，只需检查例如backendArray = [2,4];和一个函数检查是获取数据后选择的标志this.calibres = this.calibres.map(&nbsp; &nbsp; &nbsp; (elem) =>{ elem.isSelected = this.backendArray.indexOf(elem.value) != -1 ? true : false;&nbsp; &nbsp; return elem});HTML 部分使用选中的属性。更改时传递口径，并将切换逻辑设置为 isSelected 标志<div >&nbsp; &nbsp; &nbsp; <mat-checkbox #checkBox&nbsp; &nbsp; &nbsp; *ngFor="let calibre of calibres"&nbsp; &nbsp; &nbsp; [checked]="calibre.isSelected"&nbsp; &nbsp; &nbsp; [value]="calibre.value"&nbsp; &nbsp; &nbsp; (change)="getCheckbox(calibre)"&nbsp; &nbsp; &nbsp; class="example-margin mb-0 mt-1" >{{calibre.value}}</mat-checkbox></div>

Answer 2

不能在循环中使用属性。因为您为数组中按 ischeck 属性筛选的项目创建复选框。因此，使用此属性将完成您的工作[checked]=true&nbsp;<mat-checkbox #checkBox&nbsp; &nbsp; &nbsp; *ngFor="let calibre of calibres; let i = index"&nbsp; &nbsp; &nbsp; [value]="calibre"&nbsp; &nbsp; &nbsp; [checked]="true"&nbsp; &nbsp; &nbsp; (change)="getCheckbox()"&nbsp; &nbsp; &nbsp; class="example-margin mb-0 mt-1" >{{calibre}}</mat-checkbox>更新：&nbsp;getCheckbox() {&nbsp; &nbsp; &nbsp;this.item.calibres = this.checkBox.map(checkbox&nbsp; => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value: checkbox.value,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;isChecked: checkbox.checked&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;&nbsp; }<mat-checkbox #checkBox&nbsp; &nbsp; &nbsp; *ngFor="let calibre of calibres; let i = index"&nbsp; &nbsp; &nbsp; [value]="calibre.value"&nbsp; &nbsp; &nbsp; [checked]="calibre.isChecked"&nbsp; &nbsp; &nbsp; (change)="getCheckbox()"&nbsp; &nbsp; &nbsp; class="example-margin mb-0 mt-1" >{{calibre.value}}</mat-checkbox>

Answer 3

希望这可以帮助将来的人，我通过属性绑定和一个小函数以简单的方式解决了这个问题。问题：我有一个数组，其值仅为选中的复选框，当用户想要编辑它时，我必须再次显示复选框，并且复选框已选中。Ex: Categories = ["a","d"]溶液：在 HTML 文件中 - 将属性绑定与一个函数结合使用，该函数检查数组中是否存在值并返回 true 或 false。（您也可以使用 *ngFor）&nbsp; <h3>Category</h3>&nbsp; <label><input type="checkbox" [checked]="checkCat('a')">a</label>&nbsp; <label><input type="checkbox" [checked]="checkCat('b')">b</label>&nbsp; <label><input type="checkbox" [checked]="checkCat('c')">c</label>&nbsp; <label><input type="checkbox" [checked]="checkCat('d')">d</label>在 .ts 文件内cat = ["a","d"]; // checkbox data received from backend&nbsp;checkCat(data){&nbsp; &nbsp; let ref = this.cat.find(x => x == data); // this checks the cat[] array&nbsp; &nbsp; if(ref == data){&nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }&nbsp; &nbsp;}