Есть ли способ использовать автозаполнение мат, где соответствующий вход находится в его родительском компоненте?

Question

Это работает с обычным элементом списка данных, где list="target" на элементе input может найти id="target" в дочернем компоненте. Я пытаюсь найти способ сделать это с помощью компонента автозаполнения материала.

Использование обычного элемента списка данных

parent.component. html

 <input type="text" list="target">
 <app-child></app-child>

child.component. html

<datalist id="target">
    <option *ngFor="let option of options" [value]="option.name"></option>
</datalist>

I Я пытался реализовать эту функцию в течение всего дня. Обычно я получаю одну из двух ошибок:

Error: Attempting to open an undefined instance of `mat-autocomplete`. Make sure that the id passed to the `matAutocomplete` is correct and that you're attempting to open it after the ngAfterContentInit hook.

или

Error: Export of name 'matAutocomplete' not found!

Использование Mat-Form-Field и Mat-Autocomplete

mat-parent.component. html

<mat-form-field>
    <input type="text" matInput [matAutocomplete]="auto">
</mat-form-field>
<app-mat-child></app-mat-child>

mat-child.component. html

<mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let option of options" [value]="option.name"</option>
</mat-autocomplete>

Answer 1

Я приземлился здесь, потому что искал "Ошибка: Экспорт имени 'matAutocomplete' не найден!" строка. Я исправил это в своем проекте, импортировав MatAutocompleteModule. Итак, в module.ts вашего компонента вы захотите добавить следующее:

import { MatAutocompleteModule } from '@angular/material/autocomplete';

(then scroll down to your imports array)

imports: [
  MatAutocompleteModule
]

Что касается основного вопроса, я немного новичок в Angular сам, но afaik, если вы хотите передать свой текст от родителя детям, вам необходимо использовать «Ввод».

Я бы порекомендовал вам прочитать соответствующую часть документации, я не могу объяснить, это немного лучше, чем это: https://angular.io/guide/template-syntax#how -вход-ввод

Надеюсь, это поможет:)