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

Question

这适用于常规的datalist元素，其中input元素上的list="target"可以在子组件中找到id="target"。我正在尝试找出一种使用material autocomplete组件来实现此目的的方法。

使用常规的datalist元素

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

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如果你想把你的文本从父类传递到子类，你需要使用一个'Input‘。

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

我希望它能有所帮助:)