javascript - 如何在Angular的mat-checkbox更改中向/从数组推送和弹出项目？

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 link

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 link