Angular Material Autocomplete：当有多个自动完成控件时，自动完成面板不会在页面滚动上折叠答案

【问题标题】：Angular Material Autocomplete: Autocomplete Panel doesn't collapse on Page Scroll when there are more than one Autocomplete controlAngular Material Autocomplete：当有多个自动完成控件时，自动完成面板不会在页面滚动上折叠
【发布时间】：2020-08-11 01:08:39
【问题描述】：

如stackblitz 所示，当stackblitz 示例中显示有多个自动完成控件时，我在关闭自动完成控件时遇到了问题，除了页面滚动上的第一个自动完成控件（城市）。

复制步骤：

首先点击 - City 自动完成控件并让它保持扩展。
尝试进行页面级滚动，然后 City 自动完成控件折叠。
现在点击第二个 - State/Country 自动完成控件并让它保持扩展。
尝试进行页面级滚动并查看 State/Country 自动完成控件没有折叠。

预期行为：州/国家/地区自动完成控件应该像页面滚动上的城市自动完成控件一样折叠。

实际行为：州/国家/地区自动完成控件不会在页面滚动时折叠。

【问题讨论】：

标签： angular autocomplete angular-material angular7 mat-autocomplete

【解决方案1】：

您应该使用@ViewChildren 装饰器来保存每个MatAutocompleteTriggers：

@ViewChildren(MatAutocompleteTrigger) autoCompleteTriggers: QueryList< MatAutocompleteTrigger>;

closePanels() {
  this.autoCompleteTriggers.forEach(trigger => {
    if (trigger.panelOpen) {
      trigger.closePanel();
    }
  });
}

Forked Stackblitz

【讨论】：