从* ngFor中的多个“ mat-checkbox”获取数据

Question

我试图用选定的复选框填充数组，但是当我取消选中复选框时，也会删除条目。但是我在.ts-class的实现中苦苦挣扎，您能帮我吗？

component.html

  <div class="propertys" fxFlex="column">
     <mat-checkbox *ngFor="let p of properties" (click)="setProperties(p)">{{p.name}}</mat-checkbox>
  </div>

Answer 1

尝试使用SelectionModel。

<div class="propertys" fxFlex="column">
  <mat-checkbox *ngFor="let p of properties" 
  [checked]="selectedItens.isSelected(p)" 
  (click)="setProperties(p, $event)">
    {{p.name}}
  </mat-checkbox>
</div>

ts：

selectedItems = new SelectionModel<any>(true, []);

setProperties(p: any, event: Event): void {
  event.preventDefault();
  selectedItems.toggle(p);
}

getItems(): any[] {
  return this.selectedItems.selected;
}

如果您使用对象作为值并从API重新加载它（那么我建议您使用带有ID的SelectionModel），则可能会遇到一些问题，但是如果您的复选框是静态的，则应该可以使用。