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

Posted 2023-02-22

【中文标题】cdk-table：找不到具有 id 的列

【英文标题】：cdk-table: Could not find column with id

【发布时间】：2018-02-25 02:24:50

【问题描述】：

我正在使用角度材料表来显示数据。我有 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 错误。谢谢你

【问题讨论】：

出于好奇，如果您切换displayedColumns 或列模板定义的顺序，错误是否会从Name 更改为其他内容？

【参考方案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>

【讨论】：

我很高兴这对你有用。我回答中有趣的部分是，就在 8 小时前，我遇到了你的问题，试图解决完全相同的问题。一旦我想出如何解决它，我就回到这里分享。 =)

你能描述一下去掉星号的作用吗？

说实话我从来没有想过这个。我刚刚发现它是一种“语法糖”，我们可以创建自己的指令来使用它。我在*** 上找到了这个链接，其中有一些解释，here 是 Angular 文档中的内容。很抱歉不能直接给你任何答案。希望对您有所帮助。

我有同样的错误，但由于不同的问题。以为我会分享它以防它对某人有所帮助：确保您的 cdkColumnDef 元素实际上正在被渲染！我的不是，因为它们位于带有 *ngFor 循环的 ng-container 中，由于源数组为空，因此没有迭代。

@Jonathan 谢谢。你的评论让我免于头疼。我有一个 ngIf，它的条件是表数据不为空。当它为空时，列定义基本上不存在。角度给出的错误坦率地说是相当糟糕的。