angular - 如何在 Angular 中有选择地添加 Material 自动完成

Question

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

目前我已经尝试将 *ngIf 添加到 mat 自动完成标记，但它会引发错误，因为输入具有 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 的 future 版本，否则无法在表单字段上绕过 ngIf。参见 https://github.com/angular/material2/issues/11096 (我的问题)。他们将在 Angular Material v6 中通过一个禁用自动完成的新指令选项修复此问题 - matAutocompleteDisabled。发布后，您可以这样做:

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

因此，如果 auto 为 null，您将不会收到任何错误。