angular - 仅在 Angular 2+ 中键入至少 1 个字母后才显示自动完成下拉列表

Question

我想使用 Angular 2+ 和 angular material design 实现自动完成功能除非他们至少输入了 1 个字母，否则不应出现选项的位置。

默认情况下，即使输入为空，自动完成也可以在焦点上切换，所以我想更改此行为。

我尝试在 mat-autocomplete 元素上添加条件 *ngIf="inputField.value"为了仅在输入有值时显示选项，但它返回错误:

错误:试图打开 mat-autocomplete 的未定义实例.确保传递给 matAutocomplete 的 id是正确的，您正试图在 ngAfterContentInit Hook 之后打开它。

此外，我尝试在 [matAutocomplete]="auto" 中添加一个条件在输入字段上，但它也返回错误。

我注意到当显示自动完成选项时，元素 cdk-overlay-container和 mat-autocomplete-panel在关闭前创建 </body> ，并且它们与原始组件没有链接，因此很难通过 css 隐藏。

你知道怎么做吗？

请关注Stackblitz上的代码.

谢谢!

Answer 1

如果输入的文本长度为 0，则不调用过滤函数。

this.filteredOptions = this.myControl.valueChanges
  pipe(
     startWith(''),
     map(val => val.length >= 1 ? this.filter(val): [])
);

Demo