Expression has changed after it was checked. Previous value: 'ngTemplateOutlet: undefined'. Current value: 'ngTemplateOutlet: [object Object]'

Question

There is such an error:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngTemplateOutlet: undefined'. Current value: 'ngTemplateOutlet: [object Object]'.

at viewDebugError (core.js:9775)

at expressionChangedAfterItHasBeenCheckedError (core.js:9753)

at checkBindingNoChanges (core.js:9920)

at checkNoChangesNodeInline (core.js:13970)

at checkNoChangesNode (core.js:13942)

at debugCheckNoChangesNode (core.js:14771)

at debugCheckDirectivesFn (core.js:14673)

at Object.eval [as updateDirectives] (ShowEventComponent.html:73)

at Object.debugUpdateDirectives [as updateDirectives] (core.js:14655)

at checkNoChangesView (core.js:13780)

She appeared because of this:

<tr *ngFor="let user of users">
    <ng-template [ngTemplateOutlet]="loadTemplate(user)" 
                [ngTemplateOutletContext]="{ $implicit: user}">
    </ng-template>
</tr>

How can I fix it?

I use Angular 5.2.0, rxjs 5.5.6

Answer 1

This has to do with change detection. You can read more about it here. I solved this problem by using the detectChanges() method from ChangeDetectorRef i.e.

constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {}

  ngAfterViewInit(): void {
    this.cdr.detectChanges();
  }

You'll need to implement the AfterViewInit interface.