如何在Angular

Question

我希望能够选择性地为输入添加自动填充功能。

目前我尝试在mat自动填充标记中添加*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

建议＆＃34; hack＆＃34;如果你总是拥有自动完成组件，但有时候没有项目，那么效果很好。但听起来你想要创建一个基于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为空，则您不会收到任何错误。

Answer 2

稍微破解一下，当选中幻灯片时，您可以简单地用空数组替换建议：

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

Here is an edit of your stackblitz.