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

Question

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

重现步骤：

1. 首先点击 - 城市 自动完成控件并让它保持展开状态。

2. 尝试进行页面级别滚动，然后 City 自动完成控件崩溃。

3. 现在点击第二个 - State/Country 自动完成控件并让它保持展开状态。

4. 尝试进行页面级别滚动并查看 State/Country 自动完成控件不会折叠。

预期行为：State/Country自动完成控件应该像页面滚动时的城市自动完成控件一样折叠。

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

Answer 1

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

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

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

Forked Stackblitz