收到错误：找不到 ID 为“id”的列

Question

我正在尝试用数据填充 mat-table，但是当我尝试这样做时出现错误：Could not find column with id "id"。

这就是我在组件文件中的做法：

    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();
      }
    }

这是我基本上从示例中复制的 html：

    <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>

当我 console.log orders 它返回这个：

Answer 1

您对matColumnDef="" 属性的定义是错误的。请参阅下面的示例，

    <!-- 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>

所以你的代码需要是这样的：

    <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>