angular - 如何修复 Angular mat-expansion-panel 上的 ExpressionChangedAfterItHasBeenCheckedError

Question

目标:如果用户点击任何顶级级 mat-expansion-panel-header 元素，则折叠任何打开的嵌套级 mat-expansion-panel-header 元素，例如:

1. 点击主标题 1 将其展开
2. 点击副标题 1 将其展开
3. 点击主标题 1 将其折叠。这应该会触发一个折叠副标题 1 的事件。

这本质上是一项“内务管理”任务，用于在用户让面板处于展开状态时进行清理。

问题:如果快速连续双击顶级级别的 mat-expansion-panel-header 元素之一(例如:当展开/折叠动画仍在运行时)，则会出现以下错误抛出在控制台中:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mat-expanded: false'. Current value: 'mat-expanded: true'.

如果您继续引发这些错误，最终它会无限期地引发并且浏览器完全锁定。

在此处查看 Stackblitz 项目:https://stackblitz.com/edit/expression-changed-error

我正在考虑执行一些操作，例如禁用点击直到打开/关闭动画完成，但我确信发生这种情况一定有原因，并且需要对其进行适当的修复。

Answer 1

请从 html 中删除以下代码以解决该错误。

(afterExpand)="collapseSub(panel)"

从collapseSub函数中我看到您正在尝试关闭面板并仅打开选定的面板。但这已经是默认处理的了。当面板已默认处理时，您正尝试更改面板的展开状态；