ExpressionChangedAfterItHasBeenCheckedError：使用Angular2检查表达式后，表达式已更改

Question

i had tried to solve this error ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '0'. ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '0'. in this way:

TS:

 import {
     ChangeDetectionStrategy
 } from '@angular/core';
 @Component({
     templateUrl: './page.html'
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 public Pages: Object;

 ngOnInit() {
     loadAllGuides() {
         this.ApiService
             .getAllPages()
             .subscribe(
                 Pages => {
                     this.Pages = Pages.data;
                 }, error => {
                     console.log(error);
                 });
     }
 }

When i used ChangeDetectionStrategy the error got solved in console but i am facing one more issue, the page is not showing any data unless i give a click when the page opens. Once i give a random click on page the data loads. Can anyone help me.

Answer 1

First Delete changeDetection: ChangeDetectionStrategy.OnPush

Secondly, you have:
public Pages:Object; => avoid using a First capital letter for variables, so use public pages:Object; instead.

then here you have:

 Pages => {
    this.Pages = Pages.data;
}

try:

response => {
    this.pages = response.data;
}

Answer 2

I think you need to provide initial value.

for example -

public Pages = null;

for more information read this article - Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error . It explain this error in great detail. Hope it helps.