Angular - Как установить флажок на основе значений в массиве?

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>

getCheckbox () функция на component.ts создает массив этих элементов, отмеченных в моем флажке

  getCheckbox() {

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

Когда я отправляю форму, этот массив проверенных элементов сохраняется в Backend для этого конкретного «элемента», созданного формой, поэтому сохраненный массив будет иметь вид [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 секция использует атрибут checked. Передайте калибр при изменении и переключите logi c на флаг 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 в l oop. потому что вы создаете флажки для элементов в массиве, которые фильтруются по свойству 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>

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>