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

问题是您将两个自动完成都绑定到变量auto。查找唯一的名称，效果很好。

相反

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

和

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

做

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

和

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