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

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

如果您始终拥有自动完成组件但有时没有相应的项目，则建议的“黑客”效果非常好。但听起来您想创建一个基于 MatFormField 和 MatInput 的自定义组件，可以选择使用 MatAutocomplete。我已经这样做了，除非您使用 Angular Material v6 的未来版本，否则无法绕过表单字段上的 ngIf。请参阅https://github.com/angular/material2/issues/11096（我的问题）。他们将通过一个新的指令选项来禁用自动完成功能 -

matAutocompleteDisabled

，在 Angular Material v6 中修复此问题。释放后，您可以执行以下操作：

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

因此，如果

auto

为空，您不会收到任何错误。

Answer 2

通过一点技巧，您可以在检查幻灯片时简单地将建议替换为空数组：

<mat-autocomplete  #auto="matAutocomplete">
      <mat-option *ngFor="let state of (slide.checked ? [] : (filteredStates| async)) " 
[value]="state.name">
...

这是您的 stackblitz 的编辑。