Angular Material MatChipList 点击获取所有选定的芯片

Question

任何人都可以分享我们如何通过鼠标点击在 MatChipList 中获取所有选定的芯片？

在我们的要求之一中，我们需要发布所有当前选定的筹码值。我无法找到这样做的逻辑。

<mat-chip-list  multiple id="chipList" [selectable]="true" >
<mat-chip *ngFor="let chip of productListSource" [selected]="chip.state" (click)="chip.state=!chip.state" >
  {{chip.viewValue}}
</mat-chip>

Answer 1

在花了一些时间之后，我能够通过以下方式做到这一点：

HTML

<mat-chip-list multiple id="chipList" [selectable]="true" >
  <mat-chip *ngFor="let chip of productListSource" [selected]="chip.state" (click)="chip.state=!chip.state;changeSelected('s', chip.viewValue)" >
    {{chip.viewValue}}
</mat-chip>
</mat-chip-list>

打字稿

selectedChips: any[] = [];

changeSelected(parameter: string, query: string) {

  const index = this.selectedChips.indexOf(query);
  if (index >= 0) {
    this.selectedChips.splice(index, 1);
  } else {
    this.selectedChips.push(query);
  }
  console.log('this.selectedChips: ' + this.selectedChips);
}