cdk-table：找不到具有 id 的列

Question

我正在使用角度材料表来显示数据。我有 displayColumns 的字符串数组，但出现“找不到带有 id 'Name' 的列”错误。这是我的错误。帮助表示赞赏。

import { Component, OnInit, ViewChild } from '@angular/core';
import { DataService } from '../core/services/data.service';
import { People, PeopleDetails, PeopleDetailRequest, PeopleWithTotals } from "../models/datamodelsObj";
import { DataSource } from '@angular/cdk';
import { MdPaginator } 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';

@Component({
  selector: 'app-peoplesummary',
  templateUrl: './people-summary.component.html',
  styleUrls: ['./people-summary.component.scss'],
  providers:[]
})
export class PeopleSummaryComponent implements OnInit {


  displayedColumns = ['Name', 'Address', 'Email', 'Phone'];
  psDatabase : PeopleSummaryDatabase|null;
  dataSource: PeopleSummaryDataSource | null;

  @ViewChild(MdPaginator) paginator : MdPaginator;

  constructor(private dataService: DataService,private pagi:MdPaginator) { 
    this.psDatabase=new PeopleSummaryDatabase(dataService);
    this.dataSource=new PeopleSummaryDataSource(this.psDatabase,pagi);
  }

  ngOnInit() {
    this.dataSource = new PeopleSummaryDataSource(this.psDatabase, this.paginator);
    console.log(this.dataSource);
  }

}
export class PeopleSummaryDatabase {
  people: People;
  public dataChange: BehaviorSubject<PeopleDetails[]> = new BehaviorSubject<PeopleDetails[]>([]);
  get data(): PeopleDetails[] { return this.dataChange.value }

  private _dataService: DataService



  constructor(_dataService: DataService) {
    _dataService.getPersonDetails(this.assetDetailRequestObj).subscribe(data=>this.dataChange.next(data));
   }

}
export class PeopleSummaryDataSource extends DataSource<any> {

    constructor(private _groupDatabase :PeopleSummaryDatabase, private _paginator: MdPaginator){
      super();
    }

    connect(): Observable<PersonDetails[]> {
      const displayDataChanges = [
        this._groupDatabase.dataChange,
        this._paginator.page
      ];
      return Observable.merge(...displayDataChanges).map(() => {
        const data = this._groupDatabase.data.slice();
        console.log(data);

        const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
        return data.splice(startIndex, this._paginator.pageSize);
      })
    }

    disconnect() {}
  }

这是我的html

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

      <ng-container *cdkColumnDef="Name">
        <md-header-cell *cdkCellDef>Name</md-header-cell>
        <md-cell *cdkCellDef="let row"> {{row.Name}} </md-cell>
      </ng-container>

      <ng-container *cdkColumnDef="Address">
        <md-header-cell *cdkCellDef>Address</md-header-cell>
        <md-cell *cdkCellDef="let row"> {{row.Address}} </md-cell>
      </ng-container>

      <ng-container *cdkColumnDef="Email">
        <md-header-cell *cdkCellDef>Email</md-header-cell>
        <md-cell *cdkCellDef="let row"> {{row.Email}} </md-cell>
      </ng-container>

      <ng-container *cdkColumnDef="Phone">
        <md-header-cell *cdkCellDef>Phone</md-header-cell>
        <md-cell *cdkCellDef="let row"> {{row.Phone}} </md-cell>
      </ng-container>


      <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
      <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>

    </md-table>

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

当我调试时，我看到了数据，但不明白为什么我得到 column not found 错误。谢谢你

Answer 1

尝试从“cdkColumnDef”属性的开头删除星号。

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

  <ng-container cdkColumnDef="Name">
    <md-header-cell *cdkCellDef>Name</md-header-cell>
    <md-cell *cdkCellDef="let row"> {{row.Name}} </md-cell>
  </ng-container>

  <ng-container cdkColumnDef="Address">
    <md-header-cell *cdkCellDef>Address</md-header-cell>
    <md-cell *cdkCellDef="let row"> {{row.Address}} </md-cell>
  </ng-container>

  <ng-container cdkColumnDef="Email">
    <md-header-cell *cdkCellDef>Email</md-header-cell>
    <md-cell *cdkCellDef="let row"> {{row.Email}} </md-cell>
  </ng-container>

  <ng-container cdkColumnDef="Phone">
    <md-header-cell *cdkCellDef>Phone</md-header-cell>
    <md-cell *cdkCellDef="let row"> {{row.Phone}} </md-cell>
  </ng-container>


  <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
  <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>

</md-table>

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