Как при желании добавить материал автозаполнения в Angular

Question

Я хочу иметь возможность по желанию добавить автозаполнение к входу.

В настоящее время я пытался добавить *ngIf к тегу автозаполнения mat, но это вызывает ошибки, потому что у входа есть свойство matAutocomplete иищет компонент автозаполнения.Я также пытался установить matAutocomplete в ноль, когда я хочу отключить автозаполнение, но это не сработало.

Вот что я устал:

• https://stackblitz.com/edit/angular-3ebz9m-bw56h9?file=app/autocomplete-overview-example.html

Но я получаю:

Error: Attempting to open an undefined instance of `mat-autocomplete`.

Вот как я хочу, чтобы это работало:

• https://stackblitz.com/edit/angular-3ebz9m-umwj6h?file=app%2Fautocomplete-overview-example.html

Но бездублировать теги поля ввода и формы.

Answer 1

Предлагаемый «хак» отлично работает, если у вас всегда есть компонент автозаполнения, но иногда нет элементов для него.Но похоже, что вы хотите создать пользовательский компонент на основе MatFormField и MatInput, который может дополнительно использовать MatAutocomplete.Я сделал это, и нет никакого способа обойти ngIf в поле формы, если вы не используете будущую версию Angular Material v6.См. https://github.com/angular/material2/issues/11096 (мой выпуск).Они исправят это в Angular Material v6 с помощью новой опции директивы для отключения автозаполнения - matAutocompleteDisabled.После освобождения вы можете сделать следующее:

<input matInput [matAutocomplete]="auto" [matAutocompletDisabled]="slide.checked">

Поэтому, если auto равно нулю, вы не получите никаких ошибок.

Answer 2

С небольшим взломом вы можете просто заменить предложения пустым массивом при проверке слайда:

<mat-autocomplete  #auto="matAutocomplete">
      <mat-option *ngFor="let state of (slide.checked ? [] : (filteredStates| async)) " 
[value]="state.name">
...

Вот правка вашего стекаблиц.