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

Question

I have a form whith these checkboxes, in order to allow users to select multiple 'calibres' of an item:

Form checkbox

Those checkboxs are created through ngFor from an array called 'calibres' which have all the possible values, as shown in following code:

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>

getCheckbox() function on component.ts creates an array of those elements checked in my checkbox

  getCheckbox() {

    this.item.calibres = [];
    const checked = this.checkBox.filter(checkbox => checkbox.checked);
    checked.forEach(data => {
         this.item.calibres.push ( data.value );
    });
  }

When I submit the form, this array of checked elemets is stored in Backend for this particular 'item' created by the form, so the stored array will be something like [ 50,60 ]. ONLY checked checkboxes.

What Im trying to do is at the moment of filling the form ( for item 'edit' purposes ) is get checked those checkboxes stored in the array.

How can I achieve that?

Answer 1

Hope this might help someone in the future,

I solved this in an easy way with attribute binding and a small function.

Problem: I have an array Ex: Categories = ["a","d"] that has the value of only the selected checkbox, and when the user wants to edit it I have to show the checkbox again with the checkbox already checked.

Solution:

In HTML File - Using attribute binding with a function that checks if the value is present in the array and returns true or false. (You can use *ngFor as well)

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

Inside the.ts file

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

Answer 2

If you are using a model then this will be very easy and clean.

Say your calibres are of below model

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

When you get an array from backend just check like

backendArray = [2,4];

And a function to check isSelected flags after you fetch data

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

HTML section use checked attribute. Pass calibre when on change and do your toggle logic to isSelected flag

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

Cant you use attribute [checked]=true in the loop. because you create checkboxes for the items in the array which are filtered by ischecked property. Therefore using this attribute will get your job done

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

UPDATE:

 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>