Angular 2 <mat-expansion-panel> 展开和折叠所有

【问题标题】：Angular 2 <mat-expansion-panel> expand and collapse allAngular 2 <mat-expansion-panel> 展开和折叠所有
【发布时间】：2025-12-31 05:00:07
【问题描述】：

我有一个例子：https://stackblitz.com/edit/*-49230894 ... 这里有一个问题：当我手动展开项目时，“全部折叠”不起作用（当我“全部展开”，然后手动折叠项目时，“全部展开”按钮将不起作用）。有什么解决办法吗？

【问题讨论】：

【解决方案1】：

这里的主要问题是所有材料组件/指令都有一个 OnPush 检测策略。因此，如果输入的引用没有改变（对于 Object/Array，或者对于 string/number/boolean 的原始值），则不会重新渲染组件。

在您的情况下，如果您展开所有面板，则将 allExpandState 设置为 true，但即使您手动关闭面板，allExpandState 也会保持为 true。因此，如果您再次单击以展开全部，allExpandState 将保持为 true，并且不会重新渲染面板。

这是一个带有解决方案的分叉Stackblitz（当然不是唯一可用的）。

主要是获取 MatExpansionPanel 的所有实例

@ViewChildren(MatExpansionPanel) viewPanels: QueryList<MatExpansionPanel>;

然后在allExpandState设置器中手动打开或关闭所有面板用

this.viewPanels.forEach(p => value ? p.open() : p.close());

【讨论】：