Question

我使用角度材质表来显示数据。我有displayColumns的字符串数组，但是我找不到包含id＆＃39; Name＆＃39;＆＃39;错误。这是我的错误。感谢帮助。

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>

当我调试我看到的数据但不明白为什么我找不到列错误。谢谢

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>

cdk-table：找不到带id的列

1 个答案: