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

Question

我想使用角度材料设计的 Angular 2+实现自动完成,除非他们输入至少1个字母,否则不应出现选项.

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

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

错误:尝试打开未定义的实例mat-autocomplete.确保传递给的id matAutocomplete是正确的,并且您尝试在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): [])
);

演示