Angular Material 6 Mat-Chip-List - 两个 mat-chip-list 声明共享相同的数据源

【问题标题】：Angular Material 6 Mat-Chip-List - two mat-chip-list declarations share the same data sourceAngular Material 6 Mat-Chip-List - 两个 mat-chip-list 声明共享相同的数据源
【发布时间】：2018-12-29 14:05:54
【问题描述】：

使用 Angular 6 和 Angular Material，我正在尝试使用不同的数据源制作 2 个自动完成芯片列表 - 我在此处扩展了最后一个示例：https://material.angular.io/components/chips/overview

然而，最后一个 Mat-Chip-List 似乎“覆盖”了前一个，即使它们被映射到不同的对象和标签等。

如果您删除第二个 Mat-Chip-List，第一个会正确加载 - 如果您更改 Map-Chip-List 的声明顺序，第二个总是会正确加载

我在这里创建了一个 StackBlitz 用于演示：https://stackblitz.com/edit/angular-v2jdk8

有没有办法唯一标识其中任何一个？

【问题讨论】：

标签： javascript angular angular-material angular6

【解决方案1】：

问题是您将两个自动完成绑定到变量auto。找到唯一的名称，它就可以正常工作。

改为

[matAutocomplete]="auto"
                  ^^^^^^

和

<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectedFruit($event)">
                  ^^^^^

做

[matAutocomplete]="fruitAuto"
                   ^^^^^^^^^

和

<mat-autocomplete #fruitAuto="matAutocomplete" (optionSelected)="selectedFruit($event)">
                  ^^^^^^^^^^

【讨论】：