angular - 有没有办法使用 mat-autocomplete ，其中相应的输入在其父组件中？

Question

这适用于常规 datalist 元素，其中 list="target"在输入元素上可以找到id="target"在子组件中。我试图找出一种使用 Material 自动完成组件执行此操作的方法。

使用常规数据列表元素

父组件.html

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

子组件.html

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

我一整天都在尝试实现此功能，但通常会遇到以下两个错误之一:

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 在我的项目中修复了它。
所以在 模块.ts 在您的组件中，您需要添加以下内容:

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

(then scroll down to your imports array)

imports: [
  MatAutocompleteModule
]

关于主要问题，我自己对 Angular 有点陌生，但是如果您想将文本从父级传递给子级，则需要使用“输入”。

我建议您阅读文档的相应部分，我无法解释它: https://angular.io/guide/template-syntax#how-to-use-input

我希望它有帮助:)