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

Question

Using Angular 6 and Angular Material, I am trying to make 2 Auto-complete Chip Lists with different data sources - I have extended the last example here at: https://material.angular.io/components/chips/overview

However, the last Mat-Chip-List seems to "override" the previous one, even though they are mapped to different objects and tags etc.

If you remove the second Mat-Chip-List, the first one loads correctly - if you change the order of declaration of either Map-Chip-List , the second one always loads correctly

I have created a StackBlitz here for demo: https://stackblitz.com/edit/angular-v2jdk8

Is there a way to uniquely identify either of these?

Answer 1

The problem is that you bind both your autocompletions to the variable auto . Find unique names and it works fine.

Instead

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

and

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

do

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

and

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