如何在Angular Mat-Expansion-Panel上修复ExpressionChangedAfterItHasBeenCheckedError

2024-05-05 • 问答

目标：如果用户单击任何 top 级mat-expansion-panel-header元素，然后折叠任何打开的 nested 级mat-expansion-panel-header元素，例如：

点击主标题1 将其展开
点击副标题1 展开
单击主标题1 将其折叠。这应该会触发使子标题1 崩溃的事件。

从本质上讲，这是一项“整理”任务，如果用户将面板扩展为展开状态，则将其清除。

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

ExpressionChangedAfterItHaHasBeenCheckedError：检查表达式后，表达式已更改。先前的值：'mat-expanded：false'。当前值：“ mat-expanded：true”。

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

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

我正在考虑执行诸如禁用点击操作之类的操作，直到打开/关闭动画结束为止，但是我确定一定有原因会导致这种情况并对此进行适当的修复。

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

(afterExpand)="collapseSub(panel)"

从collapseSub函数中，我看到您正在尝试关闭面板并仅打开选定的面板。 但是默认情况下已经对此进行了处理。 您正在尝试更改面板的扩展状态（默认情况下已经处理过）；

如果您不想删除(afterExpand)="collapseSub(panel)"，则可以尝试此解决方案。

constructor(private fb: FormBuilder,private cdRef: ChangeDetectorRef) {
  }

collapseSub = (panel: MatExpansionPanel) => {
    const items = this.matExpansionPanelQueryList.filter(item => item.expanded === true);
    if (items) {
      items.forEach(item => {
        item.close();
      });
    }
    panel.open();
    this.cdRef.detectChanges();
  }

this.cdRef.detectChanges();添加此行将为您解决问题。

简单的解决方法是使用setTimeout在当前事件周期结束后安排您的更改：

collapseSub = (panel: MatExpansionPanel) => {
  setTimeout(() => {
    const items = this.matExpansionPanelQueryList.filter(item => item.expanded === true);
    if (items) {
      items.forEach(item => {
        item.close();
      });
    }
    panel.open();
  });
}

如何在Angular Mat-Expansion-Panel上修复ExpressionChangedAfterItHasBeenCheckedError

wjhwu88 回答：如何在Angular Mat-Expansion-Panel上修复ExpressionChangedAfterItHasBeenCheckedError

大家都在问