0

My app has a parent-child relationship. Where in the parent, I include the following selector of the child:

<app-chip-list [ocoChipItems]="getChipItems(row['status'])"></app-chip-list>

Note that the data to pass to the child must be derived via logic in the getChipItems() method in the parent.

Although the app seems to work as desired, it is throwing "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked" in the console.

I fixed this by adding the following to the parent component's declaration: 

changeDetection: ChangeDetectionStrategy.OnPush

I don't fully understand what this does. So, I am not sure if it is the appropriate solution.

Thanks for your feedback.

Darrell
  • 457
  • 2
  • 6
  • 18
  • 2
    Possible duplicate of [Expression \_\_\_ has changed after it was checked](https://stackoverflow.com/questions/34364880/expression-has-changed-after-it-was-checked) – Amit Chigadani Feb 24 '19 at 19:50
  • My issue is different that the one referenced by Amit. I am updating the view while rendering each row of the table via a method call that returns a value based on the row. – Darrell Mar 03 '19 at 03:43

1 Answers1

0

While loading the table in my app, a function is called on a cell to determine its value. This causes the value to change from null to something else, which causes the issue. So, I forced Change Detection to occur after the data has been loaded from the table. This is done by subscribing to a property on the data source of the table that emits an event when the data has been loaded in the table.

this.dataSource.loading$.subscribe(() => {
  this.cdr.detectChanges();
});

I added this code to the end of the ngOnInit() method.

Darrell
  • 457
  • 2
  • 6
  • 18