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

任何人都可以分享我们如何通过鼠标单击来将所有选定的芯片保存在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>

最佳答案

花了一些时间之后，我可以通过以下方式做到这一点:

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>

typescript

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);
}

关于Angular Material MatChipList单击可获取所有选定的芯片，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51715971/