Question

所以我按照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';

导入角度数据表所需的所有导入。我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>

然而它给了我一个错误。 Error: cdk-table: Could not find column with id "Garage Name".。这个让我很难弄清楚如何处理这个问题。有人能指出错误的地方。因为我使用garageName而不是Id来更改userData的类。

Answer 1

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

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

Answer 2

displayedColumns名称应与ngContainer下的matColumnDef名称匹配，而不是如上所述您可以在模型/数组中使用任何名称

Answer 3

如果matColumnDef指令值与column对象（通常命名为displayColumns）不匹配，则会发生相同的错误例如：

<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'
  ];

如果'status'和'profileStatus'不匹配，则也会出现此错误。要修复名称必须匹配

错误：cdk-table：找不到包含id的列。 Angular 2材料数据表

3 个答案: