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>


Typescript
==================

selectedChips: any[] = [];


changeSelected(parameter: string, query: string) {

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

}