首页 文章

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

提问于
浏览 次
1

我希望能够选择性地为输入添加自动完成功能 .

目前我已经尝试将 *ngIf 添加到mat自动完成标记，但它会引发错误，因为输入具有 matAutocomplete 属性并且正在寻找自动完成组件 . 我还尝试将 matAutocomplete 设置为null，当我想要自动完成关闭但这不起作用 .

这就是我累了：

但我得到：

Error: Attempting to open an undefined instance of `mat-autocomplete`.

这就是我希望它的工作方式：

但无需复制输入和表单字段标记 .

angular angular-material

2 回答

  • 1

    如果您总是拥有自动完成组件，建议的"hack"会很有效，但有时候这样做并且除非您使用Angular Material v6的未来版本，否则无法在表单字段上使用ngIf . 见https://github.com/angular/material2/issues/11096（我的问题） . 他们将通过新的指令选项在Angular Material v6中修复此问题以禁用自动完成 - matAutocompleteDisabled . 发布后，您可以这样做：

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

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

    回复于
  • 4

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

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

    Here is an edit of your stackblitz.

    回复于

相关问题