代码之家  ›  专栏  ›  技术社区  ›  Sinan Samet

获取错误:找不到id为“id”的列

  •  0
  • Sinan Samet  · 技术社区  · 7 年前

    我试图用数据填充mat表,但我得到了错误:当我尝试这样做时,找不到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 它返回以下内容:

    enter image description here

    1 回复  |  直到 7 年前
        1
  •  31
  •   rcanpahali    5 年前

    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>
    
          <!-- Name Column -->
          <ng-container matColumnDef="plate">
           ...
          </ng-container>
    
          <!-- Weight Column -->
          <ng-container matColumnDef="status">
           ...
          </ng-container>
    
          <!-- Symbol Column -->
          <ng-container matColumnDef="type">
           ...
          </ng-container>
    
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
      </div>
    </main>