ExpressionChangedAfterItHasBeenCheckedError：具有两个同级Angular组件

Question

我正在将Angular Material扩展面板与Flex-Layout一起使用，我想将我的两个扩展面板分成两个不同的组件。

我在同一组件中使用两个扩展面板实现了StackBlitz1 HERE 。 另一方面，在第二个StackBlitz2 HERE中 ，我将这两个扩展面板拆分为两个不同的组件，但是发生了错误。 出现错误ExpressionChangedAfterItHaHasBeenCheckedError，它来自我两个组件的HTML文件中的函数“ changeExpansionPanelState（）”。

<mat-expansion-panel (opened)="changeExpansionPanelState()"
                     (closed)="changeExpansionPanelState()">
  ...
</mat-expansion-panel>

如果有人有一个解决方案能够通过两个组件完成与StackBlitz1相同的任务，那么我很感兴趣。

DEMO：

先感谢您！

Answer 1

Chellappan的答案是正确的，原因如下...

您的HTML使用panelOpenState布尔值组件变量来控制您的视图...在初始化组件时，这些实例化变量没有任何值。

  panelOpenState1: boolean;
  panelOpenState2: boolean;

然后，通过服务订阅呈现视图后，可以将值设置为这些组件变量。

 ngAfterViewInit() {
    this.panelState.panelOpenState1$.subscribe(panelOpenState1 => this.panelOpenState1 = panelOpenState1);
    this.panelState.panelOpenState2$.subscribe(panelOpenState2 => this.panelOpenState2 = panelOpenState2);
  }

因此，在呈现视图时，对于[ngClass]="{'flex': panelOpenState2}" ， panelOpenState2 undefined panelOpenState2组件变量...但是随后创建了订阅，该订阅将使用先前检查的undefined值并将其替换具有可观察的布尔值。

Previous value: 'flex: undefined'. Current value: 'flex: true'

---

避免这种情况的关键是执行以下操作之一...

用值实例化组件变量。

export class FirstPanelComponent implements AfterViewInit {
  panelOpenState1: boolean = true;
  panelOpenState2: boolean = false;

或在初始化组件时创建订阅... 在呈现视图之前，以便在需要视图时不undefined组件变量。

  ngOnInit(){
    this.panelState.panelOpenState1$.subscribe(panelOpenState1 => this.panelOpenState1 = panelOpenState1);
    this.panelState.panelOpenState2$.subscribe(panelOpenState2 => this.panelOpenState2 = panelOpenState2);
  }

  ngAfterViewInit() {
    // this.panelState.panelOpenState1$.subscribe(panelOpenState1 => this.panelOpenState1 = panelOpenState1);
    // this.panelState.panelOpenState2$.subscribe(panelOpenState2 => this.panelOpenState2 = panelOpenState2);
  }

Answer 2

我终于改变了方法，找到了一个更简单的解决问题的方法，而无需进行服务，结果如下：

StackBlitz此处