Angular 2 <mat-expansion-panel>展开和折叠全部

Question

我有一个示例：https : //stackblitz.com/edit/stackoverflow-49230894 ...这是一个问题：当我用手展开项目时，“全部折叠”将不起作用（当我“全部展开”时，效果相同”，然后手动折叠项目，“全部展开”按钮将无法使用）。有任何解决办法吗？

Answer 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());