How to use trackBy in angular material? I get the following error:

Can't bind to 'matCellDefTrackBy' since it isn't a known property of 'mat-cell'

html:

<mat-table [dataSource]="data" matSort matSortDisableClear matSortActive="name" matSortDirection="asc">
    <ng-container [matColumnDef]="column.value" *ngFor="let column of allCols">
        <mat-header-cell *matHeaderCellDef mat-sort-header (click)="load()">
            {{column.displayName}}
        </mat-header-cell>
        <mat-cell *matCellDef="let row; trackBy: trackByFn">
            {{row[column.value]}}
        </mat-cell>
    </ng-container>
    <ng-container matColumnDef="button">
        <mat-header-cell *matHeaderCellDef></mat-header-cell>
        <mat-cell *matCellDef="let row">
            <button mat-icon-button color="primary" (click)="edit(row)">
                <mat-icon>edit</mat-icon>
            </button>
            <button mat-icon-button color="warn" (click)="delete(row)">
                <mat-icon>delete_outline</mat-icon>
            </button>
        </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns.concat(['button'])"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns.concat(['button']);"></mat-row>
</mat-table>

ts:

  trackByFn(index: any, item: any): void {
    return item.id;
  }

CodePudding user response：

It is giving you an error because you have added it in the wrong place. It is the input attribute of the mat-table, not in the mat-cell.

<mat-table [dataSource]="data" matSort ... [trackBy]="trackByFn" >