Question

我想使用带有angular material design的Angular 2+实现自动填充，除非他们至少输入一个字母，否则不应出现这些选项。

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

我尝试在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): [])
);