Как выдвигать и вставлять элементы в / из массива при изменении mat-checkbox в Angular?

Question

У меня есть массив из 5 элементов.Эти элементы массива заполняются в mat-checkbox, и мне нужно помещать / вставлять элементы в новый массив, когда флажок установлен или снят.Это мой код.

HTML

<div>
  <mat-checkbox *ngFor="let a of arr1">
    {{a.value}}</mat-checkbox>
</div>

TS

export class AppComponent  {

arr1 = [
{ type: "A", value: "a" },
{ type: "B", value: "b" },
{ type: "C", value: "c" },
{ type: "D", value: "d" },
{ type: "E", value: "e" }
];
arr2: any= [];

constructor() {}
}

Может кто-нибудь дать мне лучшее решениеза это? Ссылка на Stackblitz

Answer 1

Вы можете использовать $event на mat-checkbox, чтобы выдвигать / вставлять элементы в новый массив, как показано ниже.

HTML

<div>
  <mat-checkbox *ngFor="let a of arr1" 
    (change)="onCheckboxChecked($event, a)">
    {{a.value}}</mat-checkbox>
</div>

TS

onCheckboxChecked(event, element) {

  if (event.checked) {

    this.arr2.push(element);
  } else {

    let index = this.arr2.indexOf(element);
    if (index > -1) {
      this.arr2.splice(index, 1);
    }
  }
  console.log(JSON.stringify(this.arr2));
}

См. Ссылку Stackblitz