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

Question

使用 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

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

Answer 1

问题在于您将两个自动补全绑定(bind)到变量 auto。找到独特的名称，效果很好。

相反

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

和

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

做

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

和

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