assertion error This TNode does not belong to this TView

[rakia]

Hi guys,

I have a dynamic material table implemented following the concept explained in the angular material documentation: https://material.angular.io/components/table/examples

<table mat-table [dataSource]="data" class="mat-elevation-z8">
  <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>

It was working well with Angular 10, but after migrating to Angular 11, Angular Material 11, and Typescript 4, I got the following error on the browser console whenever I open a view that should render this table:

🔥 Error

ERROR Error: ASSERTION ERROR: This TNode does not belong to this TView. [Expected=> [object Object] == [object Object] <=Actual]
    at throwError (core.js:720)
    at assertEqual (core.js:671)
    at assertTNodeForTView (core.js:1996)
    at assertTNodeForLView (core.js:1991)
    at getNativeByTNode (core.js:2594)
    at getInsertInFrontOfRNodeWithNoI18n (core.js:6688)
    at getInsertInFrontOfRNode (core.js:6673)
    at appendChild (core.js:6720)
    at createContainerRef (core.js:10669)
    at createSpecialToken (core.js:26038)

🌍 My Environment

I have Angular 11, Angular Material 11, Typescript 4

Could you please tell me what should I change to get it working correctly again?

Thanks for your help!

[petebacondarwin]

Would you be able to create a StackBlitz that demonstrates this failure that we can debug?

[mhevery]

Yes, please I need a repro to be able to get to the bottom of this.

[rakia]

here is the github repository where you can see the error: https://github.com/rakia/ng-dynamic-table.git

https://github.com/rakia/ng-dynamic-table

[rakia]

Good news,
removing #matrow from dynamic-table.component.html and replacing
<tr #matrow mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"></tr>
by
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"></tr>
has resolved my problem.

I have changed a lot of DOM before finding out the right source of the exception. Instead of just "TNode ... TView [Expected=> [object Object] == [object Object] <=Actual]", it would be really helpful if the error message thrown by Angular will be more clear.

Thank you guys for offering us a better developement experience!

[mhevery]

Thanks for the repro. If you upgrade to 11.0.2 the error will disappear. Closing as already fixed

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}