angular - 错误 : cdk-table: Could not find column with id. Angular 2 Material 数据表

Question

所以我正在关注 angular 2 material DataTables 的文档。起初它使用文档中提供的代码。但是，我稍微更改了代码，这样如果我要提供实际数据，它就不会像遵循 Angular Material 的文档那样困难，因为我已经习惯了。所以将所有导入注入(inject)到我的 TS 文件

import { Component, OnInit, ViewChild } from '@angular/core';
import { DataSource } from '@angular/cdk/collections';
import { MatPaginator } from '@angular/material';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/of';

Angular 数据表所需的所有导入都已导入。 CdkTableModule 也导入到我的 materialModule

import { CdkTableModule } from '@angular/cdk/table';

@NgModule({
  imports: [ 
    CdkTableModule,
    ..... as so on..
  ],
  exports: [ 
    CdkTableModule,
    ..... as so on..
  ]
}) export class MaterialModule { }

我将展示数据表所需的重要代码

export class ManageGaragesComponent implements OnInit {
  displayedColumns = ['Garage Name', 'Address', 'Status', 'Slots'];
  exampleDatabase = new ExampleDatabase();
  dataSource: ManageGarageDataSource | null;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  ngOnInit() {

    this.dataSource = new ManageGarageDataSource(this.exampleDatabase, this.paginator);  
  }
}



 export interface UserData {
  garageName: string;
  address: string;
  status: number;
  slots: number;
}



 /** An example database that the data source uses to retrieve data for the table. */
export class ExampleDatabase {
  /** Stream that emits whenever the data has been modified. */
  dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
  get data(): UserData[] { 

    let garage_Data = [
      {garageName: '1 Ortigas Ave', address: 'Hydrogen', status: 1.0079, slots: 5},
      {garageName: '2 Ortigas Ave', address: 'Helium', status: 4.0026, slots: 6},
      {garageName: '3 Ortigas Ave', address: 'Lithium', status: 6.941, slots: 1},
      {garageName: '4 Ortigas Ave', address: 'Beryllium', status: 9.0122, slots: 1},
      {garageName: '5 Ortigas Ave', address: 'Boron', status: 10.811, slots: 1},
      {garageName: '6 Ortigas Ave', address: 'Carbon', status: 12.0107, slots: 1},
      {garageName: '7 Ortigas Ave', address: 'Nitrogen', status: 14.0067, slots: 2},
      {garageName: '8 Ortigas Ave', address: 'Oxygen', status: 15.9994, slots: 3},
      {garageName: '9 Ortigas Ave', address: 'Fluorine', status: 18.9984, slots: 4},
      {garageName: '10 Ortigas Ave', address: 'Neon', status: 20.1797, slots: 5},
      {garageName: '11 Ortigas Ave', address: 'Sodium', status: 22.9897, slots: 6},
      {garageName: '12 Ortigas Ave', address: 'Magnesium', status: 24.305, slots: 6},
      {garageName: '13 Ortigas Ave', address: 'Aluminum', status: 26.9815, slots: 6},
      {garageName: '14 Ortigas Ave', address: 'Silicon', status: 28.0855, slots: 8},
      {garageName: '15 Ortigas Ave', address: 'Phosphorus', status: 30.9738, slots: 8},
      {garageName: '16 Ortigas Ave', address: 'Sulfur', status: 32.065, slots: 2},
      {garageName: '17 Ortigas Ave', address: 'Chlorine', status: 35.453, slots: 6},
      {garageName: '18 Ortigas Ave', address: 'Argon', status: 39.948, slots: 8},
      {garageName: '19 Ortigas Ave', address: 'Potassium', status: 39.0983, slots: 6},
      {garageName: '20 Ortigas Ave', address: 'Calcium', status: 40.078, slots: 1},
    ];

    return garage_Data;
  }

  constructor() {
    this.dataChange.next(this.data);
  }
}


export class ManageGarageDataSource extends DataSource<any> {
  constructor(private _exampleDatabase: ExampleDatabase, private _paginator: MatPaginator) {
    super();
  }

  /** Connect function called by the table to retrieve one stream containing the data to render. */
  connect(): Observable<UserData[]> {
    const displayDataChanges = [
      this._exampleDatabase.dataChange,
      this._paginator.page,
    ];

    return Observable.merge(...displayDataChanges).map(() => {
      const data = this._exampleDatabase.data.slice();
      console.log(data);
      // Grab the page's slice of data.
      const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
      return data.splice(startIndex, this._paginator.pageSize);
    });
  }

  disconnect() {}
}

这就是我的 ts 代码。还有我的 html

<mat-table #table [dataSource]="dataSource">

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- garage name Column -->
  <ng-container matColumnDef="garageName">
    <mat-header-cell *matHeaderCellDef> Garage Name </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.garageName}} </mat-cell>
  </ng-container>

  <!-- address Column -->
  <ng-container matColumnDef="address">
    <mat-header-cell *matHeaderCellDef> Address </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.address}}% </mat-cell>
  </ng-container>

  <!-- status Column -->
  <ng-container matColumnDef="status">
    <mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.status}} </mat-cell>
  </ng-container>

  <!-- slots Column -->
  <ng-container matColumnDef="slots">
    <mat-header-cell *matHeaderCellDef> Slots </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.slots}} </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

<mat-paginator #paginator
               [length]="exampleDatabase.data.length"
               [pageIndex]="0"
               [pageSize]="5"
               [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

但是它给了我一个错误。 错误:cdk-table:找不到 ID 为“Garage Name”的列。。这让我很难弄清楚如何解决这个问题。有人可以指出错误所在吗？因为我用 garageName 项而不是 Id 更改了 userData 的类。

Answer 1

显示的列数组应与数据源匹配。

displayedColumns = ['garageName', 'address', 'status', 'slots'];