有没有办法在相应输入位于其父组件中的情况下使用 mat-autocomplete？

Question

这适用于常规数据列表元素，其中输入元素上的 list="target" 可以在子组件中找到 id="target"。我正在尝试找出一种方法来使用 material 自动完成组件。

使用常规数据列表元素

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>

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

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

垫-parent.component.html

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

垫-child.component.html

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

Answer 1

我来到这里是因为我在寻找 "Error: Export of name 'matAutocomplete' not found!" 字符串。我通过导入 MatAutocompleteModule 在我的项目中修复了它。因此，在组件的 module.ts 中，您需要添加以下内容：

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

(then scroll down to your imports array)

imports: [
  MatAutocompleteModule
]

关于主要问题，我自己对 Angular 有点陌生，但据我所知，如果您想将文本从 parent 传递到 children，您需要使用 'Input'.

我建议你阅读文档的相应部分，我无法解释得比这更好：https://angular.io/guide/template-syntax#how-to-use-input

希望对您有所帮助:)

有没有办法在相应输入位于其父组件中的情况下使用 mat-autocomplete？

Is there a way to use a mat-autocomplete where the corresponding input is in its parent component?

autocomplete

typescript

angular-material

angular

mat-autocomplete