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