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 似乎 "override" 前一个，即使它们被映射到不同的对象和标签等。

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

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

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

Answer 1

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

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

和

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

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

和

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

Angular Material 6 Mat-Chip-List - two mat-chip-list declarations share the same data source