Getting the error: Could not find column with id "id"

Question

I'm trying to fill a mat-table with data but I get the error: Could not find column with id "id" when I try to do so.

This is how I've done it in my component file:

    export class ListAllTrucksComponent {       displayedColumns: string[] = ['id', 'plate', 'status', 'type'];       orders: Order[] = [];       dataSource: MatTableDataSource<Order>;            constructor(private orderService: OrderService) {         orderService.getAll().subscribe((orders) => {           for (const order of orders) {             const newOrder = new Order(order[0], order[1], order[2], order[3]);             this.orders.push(newOrder);           }           console.log(this.orders);           this.dataSource = new MatTableDataSource<Order>(this.orders);         });       }            applyFilter(filterValue: string) {         this.dataSource.filter = filterValue.trim().toLowerCase();       }     } 

And this is my html which I basically copied from the example:

    <main>       <div id="content">         <mat-form-field>           <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">         </mat-form-field>              <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">                <!-- Position Column -->           <ng-container matColumnDef="position">             <th mat-header-cell *matHeaderCellDef> No. </th>             <td mat-cell *matCellDef="let element"> {{element.id}} </td>           </ng-container>                <!-- Name Column -->           <ng-container matColumnDef="name">             <th mat-header-cell *matHeaderCellDef> Name </th>             <td mat-cell *matCellDef="let element"> {{element.plate}} </td>           </ng-container>                <!-- Weight Column -->           <ng-container matColumnDef="weight">             <th mat-header-cell *matHeaderCellDef> Weight </th>             <td mat-cell *matCellDef="let element"> {{element.status}} </td>           </ng-container>                <!-- Symbol Column -->           <ng-container matColumnDef="symbol">             <th mat-header-cell *matHeaderCellDef> Symbol </th>             <td mat-cell *matCellDef="let element"> {{element.type}} </td>           </ng-container>                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>         </table>       </div>     </main> 

When I console.log orders it returns this:

Answer 1

Your definition is wrong for matColumnDef="" property. See example below,

    <!-- Position Column -->     <ng-container matColumnDef="position"> <!--matColumnDef PROPERTY IS "position" HERE. -->         <th mat-header-cell *matHeaderCellDef> No. </th>         <td mat-cell *matCellDef="let element"> {{element.position}} </td> <!--AND "position" IS ALSO USED HERE.-->     </ng-container> 

So your code need to be like this:

    <main>       <div id="content">         <mat-form-field>           <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">         </mat-form-field>              <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">            <!-- Position Column -->           <ng-container matColumnDef="id">             <th mat-header-cell *matHeaderCellDef> No. </th>             <td mat-cell *matCellDef="let element"> {{element.id}} </td>           </ng-container>                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>         </table>       </div>     </main>