使用 ng-template 的 ContentChildren 在组件内生成 ExpressionChangedAfterItHasBeenCheckedError

Question

I am working on an Angular application, and I've faced this ExpressionChangedAfterItHasBeenCheckedError a few times, but this time I don't know what to do to solve it.

I have a component that has a few child components using @ContentChild and @ContentChildren . Inside the child component, there is a list of children, all of which I'm rendering using *ngTemplateOutlet .

I've recreated the situation with an example based on a TableComponent that has a HeaderComponent , which can have multiple HeaderItemComponent inside, and a QueryList of RowItem .

I've made a StackBlitz with the full code to reproduce the error at:

https://stackblitz.com/edit/angular-6ieqh7

The weird thing to me is that, if I remove the header when rendering the table, no errors occur, even though the header items are rendered the exact same way as the rows.

Error occurs:

<table>
  <table-header>
    <table-header-item>Id</table-header-item>
    <table-header-item>Name</table-header-item>
    <table-header-item>Status</table-header-item>
  </table-header>

  <table-row *ngFor="let row of tableData">
    <table-row-item>{{ row.id }}</table-row-item>
    <table-row-item>{{ row.name }}</table-row-item>
    <table-row-item>{{ row.status }}</table-row-item>
  </table-row>
</table>

No errors:

<table>
  <table-row *ngFor="let row of tableData">
    <table-row-item>{{ row.id }}</table-row-item>
    <table-row-item>{{ row.name }}</table-row-item>
    <table-row-item>{{ row.status }}</table-row-item>
  </table-row>
</table>

Finally, the error, accused in line 2 of header.component.html :

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

Answer 1

You can fix that error by wrapping your headers item inside setTimeOut

For More Info About Check this:

ngAfterContentInit(): void {
    setTimeout(()=>{
         this.headerItems = this.inputHeaderItems.toArray();
        this.inputHeaderItems.changes.subscribe((value: QueryList<HeaderItemComponent>) => {
          this.headerItems = value.toArray();
          this.cdr.detectChanges();
        });
      })

      }