ExpressionChangedAfterItHasBeenCheckedError: с двумя родственными угловыми компонентами - PullRequest
Новая
       92

ExpressionChangedAfterItHasBeenCheckedError: с двумя родственными угловыми компонентами

0 голосов
/ 02 января 2019

Я использую панель расширения Angular Material с Flex-Layout, и я бы хотела разделить две панели расширения на два разных компонента.

Я понял, StackBlitz1 ЗДЕСЬ , используя обе панели расширения в одном и том же компоненте. С другой стороны, во втором StackBlitz2 ЗДЕСЬ я разделил эти две панели расширения на два разных компонента, но произошла ошибка. Появляется ошибка ExpressionChangedAfterItHasBeenCheckedError, и она происходит от моей функции "changeExpansionPanelState ()" в файле HTML двух моих компонентов. 

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

Если у кого-то есть решение, позволяющее сделать то же самое, что и мой StackBlitz1 с двумя компонентами, мне будет интересно.

DEMO:

enter image description here

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 04 января 2019

Я, наконец, изменил свой метод и нашел более простое решение своей проблемы, не обращаясь к сервису, вот результат:

StackBlitz ЗДЕСЬ

0 голосов
/ 02 января 2019

Ответ 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 ... но затем создаются подписки, которые принимают предыдущее проверенное значение 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);
  }
...