如何有选择地在Angular中添加材料自动完成

Question

我希望能够有选择地向输入添加自动完成功能。

目前，我已经尝试*ngIf在垫子自动完成标记中添加一个，但由于输入具有该matAutocomplete属性并且正在寻找自动完成组件，因此会引发错误。我matAutocomplete还想将自动完成功能设置为null，但这不起作用。

这是我的累：

• 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

如果您始终拥有自动完成组件，但有时却没有相应的组件，则建议的“ hack”效果很好。但是听起来您想基于MatFormField和MatInput创建一个自定义组件，可以选择使用MatAutocomplete。我已经做到了，除非您使用Angular Material v6的未来版本，否则在表单字段上无法解决ngIf。参见https://github.com/angular/material2/issues/11096（我的问题）。他们将通过新的伪指令选项在Angular Material v6中修复此问题，以禁用自动完成功能- matAutocompleteDisabled。发布后，您可以执行以下操作：

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

因此，如果auto为null，则不会出现任何错误。