Angular |始终显示自动完成选项

Question

即使输入不在焦点上，我如何仍然显示Angular Material Autocomplete菜单？有什么论据需要补充吗？或者在TS中，甚至在CSS中，这是可能的吗？

Answer 1

只需在输入上设置autofocus属性，这将触发组件初始化上的菜单

<input autofocus [matAutocomplete]="myAutoComplete">
<mat-autocomplete #auto="matAutocomplete">
...
</mat-autocomplete>

或者，如果您想从组件类文件中以编程方式执行此操作，可以使用@ViewChild查询MatAutocompleteTrigger，并使用其openPanel()，如以下

@ViewChild(MatAutocompleteTrigger) 
autocomplete!: MatAutocompleteTrigger;

在你的函数中调用

this.autocomplete.openPanel();