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

Discussão em 'Angular' iniciado por Sinan Samet, Março 5, 2025.

  1. Sinan Samet

    Sinan Samet Guest

    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:

    [​IMG]

    Continue reading...

Compartilhe esta Página