仅在 Angular 2+ 中输入至少 1 个字母后才显示自动完成下拉菜单

Question

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

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

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

错误：尝试打开未定义的 mat-autocomplete 实例。确保传递给 matAutocomplete 的 id 是正确的，并且您正在尝试在 ngAfterContentInit 挂钩之后打开它。

另外，我尝试在输入字段的[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