CDK-Tabelle: Konnte Spalte mit ID nicht finden

Question

Ich verwende eckige Materialtabelle für die Anzeige von Daten. Ich habe String-Array von DisplayColumns, aber ich bekomme 'Fehler gefunden Spalte mit ID' Name '' Fehler. Hier ist mein Fehler. Hilfe wird geschätzt.

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() {} 
    } 

und hier ist mein 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> 

Wenn ich debuggen die I-Daten zu sehen, aber nicht verstehen, warum ich Spalte nicht gefunden Fehler. Danke

Answer 1

Versuchen Sie, die Sterne vom Anfang Ihrer "cdkColumnDef" -Attribute zu entfernen.

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