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

Question

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

重现步骤：

1. 首先单击 -城市自动完成控件并让它保持扩展。

2. 尝试进行页面级滚动，然后City Autocomplete 控件折叠。

3. 现在点击第二个 -州/国家自动完成控件并让它保持扩展。

4. 尝试进行页面级滚动并查看州/国家/地区自动完成控件没有崩溃。

预期行为：州/国家/地区自动完成控件应折叠，类似于页面滚动上的城市自动完成控件。

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

Answer 1

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

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

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

分叉的 Stackblitz