Angular Material 6 Mat-Chip-List - две декларации mat-chip-list совместно используют один и тот же источник данных

Question

Angular Material 6 Mat-Chip-List - две декларации mat-chip-list совместно используют один и тот же источник данных

1

Используя Angular 6 и Angular Material, я пытаюсь сделать 2 Auto-complete Chip Lists с разными источниками данных. Я добавил последний пример здесь: https://material.angular.io/components/chips/overview

Однако последний Mat-Chip-List кажется "переопределенным" предыдущим, хотя они сопоставляются с разными объектами и тегами и т.д.

Если вы удалите второй список Mat-Chip-List, первый из них загрузится правильно - если вы измените порядок объявления либо Map-Chip-List, второй всегда загружается правильно

Я создал StackBlitz здесь для демонстрации: https://stackblitz.com/edit/angular-v2jdk8

Есть ли способ однозначно идентифицировать любой из них?

sami 21 июль 2018, в 16:05

Источник

Теги:

angular

angular6

javascript

angular-material

1 ответ

Ещё вопросы

Kim Kern · Accepted Answer · 2018-07-21T12-03-00.000Z

Проблема в том, что вы связываете оба своих автозаполнения с переменной auto. Найдите уникальные имена, и он отлично работает.

Вместо

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

а также

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

делать

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

а также

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