Expression has changed after it was checked. Previous value: 'null: 0'. Current value: 'null: 4'

Question

I am receiving the following error:

"Expression has changed after it was checked. Previous value: 'null: 0'. Current value: 'null: 4'."

When I moved the line 'this.ondetails.emit(this.items.length);' to the constructor it did not provide me with an initial value so I had to move it to the ngOnInit().

  ngOnInit() {
    this.ondetails.emit(this.items.length);
  }

This gives me the initial values I need and the application works well but when I do this, I receive the error.

notifications-widget.component.ts

export class NotificationsWidgetComponent implements OnInit, AfterViewInit {
  @Input() config: NotificationsConfigComponent;
  @Output() ondetails = new EventEmitter();

  public items = [
    {
      title: 'Import of .......... failed',
      description:
        'Lorem ipsum dolor sit amet',
      read: true
    },
    {
      title: 'Manager ..........approved the budget',
      description:
        'Lorem ipsum dolor sit amet',
      read: true
    }
  ];

  constructor() {
  }

  deleteWidget(i) {
    this.items.splice(i, 1);
    this.ondetails.emit(this.items.length);
  }
  itemRead(i) {
    if (this.items[i].read == false) {
      this.items[i].read = true;
    }
  }
  ngOnInit() {
    this.ondetails.emit(this.items.length);
  }

  ngAfterViewInit() {
  }
}

layout.component.html

<gridster [options]="options">
    <gridster-item *ngFor="let item of layout"
          <notifications-widget *ngSwitchCase="'Notifications'"

              (ondetails)="item.widgetDetails = $event">

          </notifications-widget>                   
    </gridster-item>
</gridster>

widget-creator.component.ts

export class WidgetCreatorComponent implements OnInit {
    @Output() onsave = new EventEmitter<any>(null);
    widgetType = WidgetType.KPI;
    widgetTypes = WidgetTypes;

    constructor(private layoutService: LayoutService) { }

    save() {
        let item: GridsterItem = {
            widgetType: this.widgetType,
            widgetConfig: this.setWidgetConfig(this.widgetType),

            widgetDetails: null,

        };
        this.layoutService.addItem(item);
        this.onsave.emit(this.widgetType);
    }
}

Import ChangeDetectorRef in your component. Check here: https://stackoverflow.com/questions/34364880/expression-has-changed-after-it-was-checked — HelloWorld, Sep 03 '19 at 09:48
Thanks @HelloWorld That worked. I have added the code above. See layout.component.ts file — Ana_30, Sep 03 '19 at 10:03

score 1 · Answer 1 · answered Sep 03 '19 at 10:11

1

UPDATE WITH SOLUTION:

layout.component.ts

constructor(private cd: ChangeDetectorRef) { }

 ngAfterViewChecked() {
    this.cd.detectChanges();
  }

answered Sep 03 '19 at 10:11

Ana_30

365
5
19

1

You should mark this answer as accepted instead of changing your question's title to indicate that it is solved. – Edric Sep 03 '19 at 10:12

Expression has changed after it was checked. Previous value: 'null: 0'. Current value: 'null: 4'

1 Answers1