Получить данные из нескольких 'mat-checkbox' в * ngFor

Question

Я пытаюсь заполнить массив выбранными флажками, но также удаляю записи, когда сниму флажок. Но я борюсь с реализацией в классе .ts, вы можете мне помочь?

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 (тогдая рекомендую вам использовать SelectionModel с идентификатором), но если ваши флажки статичны, это должно работать.