I am using angular material table for displaying data. I am having string array of displayColumns but I get 'Could not find column with id 'Name'' error. Here is my error. Help is appreciated.
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() {}
}
and here is my 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>
When I debug the I see data but don't understand why I get column not found error. Thank You
