Ошибка: cdk-table: Не удалось найти столбец с идентификатором. Угловые 2 Таблицы данных материалов

Итак, я следую за документацией angular 2 material DataTables. Сначала он работал с предоставлением кодов в документации. Однако я немного изменил код, так что если я собираюсь предоставить реальные данные, это будет не так сложно, как следование документации по угловому материалу, потому что я к этому уже привык. Внедрите весь импорт в мой TS File

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

однако это дает мне ошибку. Error: cdk-table: Could not find column with id "Garage Name".. этот дает мне трудное время, чтобы понять, как работать над этим. может кто-то указать мне, где ошибка. потому что я изменяю класс для userData с элементом garageName вместо Id.

Ответы

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

<ng-container matColumnDef="profileStatus">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
  <td mat-cell *matCellDef="let row">{{ row?.profileStatus }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

    displayedColumns: string[] = [
       'status'
  ];