Angular mat-autocomplete：以编程方式设置活动项目答案

【问题标题】：Angular mat-autocomplete: Setting active item programmaticallyAngular mat-autocomplete：以编程方式设置活动项目
【发布时间】：2020-01-30 11:43:11
【问题描述】：

你想做什么？

以编程方式在我的面板中设置一个项目。

您看到哪些与您的期望不符？

使用自动完成的 keymanager 函数 setActiveItem 并不会真正更新面板的视觉效果。当手动触发视觉更新时，它在鼠标单击时起作用，但在使用键盘导航时不起作用。

复制

StackBlitz demo

重现步骤：

点击输入。
点击Show More。
SetActiveItem 选择指定索引处的项目，但之后更改选择会中断。
使用键盘导航至Show More。
按 Enter。
SetActiveItem 根本不起作用。

环境

角度：8.2.8
CDK/材料：8.2.2
浏览器：所有浏览器
操作系统（例如 Windows、macOS、Ubuntu）：全部

寻找有关如何使其工作的提示。我的方法是错误的还是 setActiveItem 没有按应有的方式工作？在函数注解中是这样描述的：

将活动项设置为指定的项并为其添加活动样式。还会从先前活动的项目中删除活动样式。

这听起来正是我需要的功能，但我无法让它工作。

【问题讨论】：

标签： angular angular-material angular-material2 angular-material-8

【解决方案1】：

我遇到了类似的问题。在我的例子中，我使用了 Ag-Grid，它用箭头停止了导航的事件传播。您确定您的 Mat-Autocomplete 收到了该事件吗？

【讨论】：

我不确定，但我只是使用 material.angular.io/components/autocomplete/examples 上的自动完成概述示例的稍微修改版本来展示我的 StackBlitz 演示中的“显示更多”用例。没有其他库可以干扰。
替换“showMore”函数中的解决方法：this.autoComplete._keyManager.setActiveItem(1); --> this.autoComplete.autoActiveFirstOption = true;
有趣的是，当使用鼠标单击“显示更多”时会中断。我发现我的示例对键盘导航根本不起作用的原因是 autocomplete-trigger.ts 的 _handleKeydown 函数总是在运行选择逻辑后重置活动项。