CDK data-table does not functioning with spring back-end data service

I implemented md-table (CDK) in my project connecting mysql db through spring backend. Initially I intigrate md-table sample code (https://material.angular.io/components/table/examples) with its sample data. I worked fine. But when I connect my actual data comming through the spring service, data view in the table correctly and filter option not function. It gives script error as mentioned below.

ERROR TypeError: Cannot read property 'slice' of undefined at MapSubscriber.project (client-list.component.ts:148) at MapSubscriber._next (map.js:77) at MapSubscriber.Subscriber.next (Subscriber.js:89) at MergeAllSubscriber.OuterSubscriber.notifyNext (OuterSubscriber.js:19) at InnerSubscriber._next (InnerSubscriber.js:23) at InnerSubscriber.Subscriber.next (Subscriber.js:89) at BehaviorSubject._subscribe (BehaviorSubject.js:28) at BehaviorSubject.Observable._trySubscribe (Observable.js:171) at BehaviorSubject.Subject._trySubscribe (Subject.js:97) at BehaviorSubject.Observable.subscribe (Observable.js:159)

I publish my code here because it wont work in plunker without my spring data service.

clilent-list-component.html

`

<div class="example-container mat-elevation-z8"> <div class="example-header"> <md-form-field floatPlaceholder="never"> </md-form-field> </div> <cdk-table #table [dataSource]="dataSource" class="example-table">

<!-- Position Column -->
<ng-container cdkColumnDef="id">
  <cdk-header-cell *cdkHeaderCellDef  class="example-header-cell"> No. </cdk-header-cell>
  <cdk-cell *cdkCellDef="let element" class="example-cell"> {{element.id}} </cdk-cell>
</ng-container>

<!-- Name Column -->
<ng-container cdkColumnDef="fname">
  <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Name </cdk-header-cell>
  <cdk-cell *cdkCellDef="let element" class="example-cell"> {{element.fname}} </cdk-cell>
</ng-container>

<!-- Weight Column -->
<ng-container cdkColumnDef="lname">
  <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Last name </cdk-header-cell>
  <cdk-cell *cdkCellDef="let element" class="example-cell"> {{element.lname}} </cdk-cell>
</ng-container>

<!-- Color Column -->
<ng-container cdkColumnDef="email">
  <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> email </cdk-header-cell>
  <cdk-cell *cdkCellDef="let element" class="example-cell"> {{element.email}} </cdk-cell>
</ng-container>

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

</cdk-table> </div>

`

client-list-component.ts

`import {Component, ElementRef, OnInit, ViewChild} from ‘@angular/core’; import {ActivatedRoute, Router} from “@angular/router”; import {ClientService} from “…/…/services/client.service”; import {Client} from “…/…/data/client”; import {DataSource} from “@angular/cdk/collections”; import {Observable} from “rxjs/Observable”; //import {MdTableModule} from ‘@angular/material’; import ‘rxjs/add/observable/of’; import {BehaviorSubject} from “rxjs/BehaviorSubject”;

@Component({ selector: ‘app-client-list’, templateUrl: ‘./client-list.component.html’, styleUrls: [‘./client-list.component.css’] })

export class ClientListComponent implements OnInit {

sampleData : Client [] = [{ id:13, fname:‘carkade’, lname:‘wijesinghe’, email:‘[e-mail]’, title:‘2’, dob:‘2017-08-28’, gender:‘1’, mobile:‘0714809448’, countryCode:‘LK’, createdDate:‘1504593982000’, status:0}]; displayedColumns = [‘id’, ‘fname’, ‘lname’, ‘email’];

dataSource: ExampleDataSource | null;

constructor(private route: ActivatedRoute, private router: Router, private clientService: ClientService) { }

@ViewChild(‘filter’) filter: ElementRef;

ngOnInit() {

this.dataSource = new ExampleDataSource(this.route, this.clientService);

Observable.fromEvent(this.filter.nativeElement, 'keyup')
  .debounceTime(150)
  .distinctUntilChanged()
  .subscribe(() => {
    console.log("-event start : "+this.filter.nativeElement.value)
    if (!this.dataSource) {
      console.log("dataSource null");
      return;
    }
    this.dataSource.filter = this.filter.nativeElement.value;
  });

}

}

/** An database that the data source uses to retrieve data for the table. */ export class ClientDatabase { dataChange: BehaviorSubject<Client[]> = new BehaviorSubject<Client[]>([]); get data(): Client[] { return this.dataChange.value; }

constructor(clientDataBase: Client[]) { this.dataChange.next(clientDataBase); } }

export class ExampleDataSource extends DataSource<any> { /** Connect function called by the table to retrieve one stream containing the data to render. */

clients: Client[]; clientDatabase: ClientDatabase;

_filterChange = new BehaviorSubject(‘’); get filter(): string { return this._filterChange.value; } set filter(filter: string) { console.log("filter 2 : "+filter); this._filterChange.next(filter); }

constructor(private route: ActivatedRoute, private clientService: ClientService) { super(); }

connect(): Observable<Client[]> { console.log(“------------ ExampleDataSource connect --------------”);

this.route
  .params
  .map(params => params['status'] || '-1')
  .subscribe(status => {
    console.log("ExampleDataSource connect 1");
    if (!this.clientService.clients) {
      this.getClients(status);
    } else {
      this.clients = this.clientService.clients;
    }
    console.log("ExampleDataSource connect 2");
    this.clientDatabase = new ClientDatabase(this.clients);
  });

const displayDataChanges = [
  this.clientDatabase.dataChange,
  this._filterChange,
];
console.log("data from backend > : "+JSON.stringify(this.clientDatabase));

  return Observable.merge(...displayDataChanges).map(() => {
    return this.clientDatabase.data.slice().filter((item: Client) => {
      let searchStr = (item.fname + item.lname).toLowerCase();
      return searchStr.indexOf(this.filter.toLowerCase()) != -1;
    });
  });

}

disconnect() {}

getClients(status: number) { if (true) this.clientService.getClients(status).then( res => { this.clients = res; }); return this.clients; } } ` console log for “data from backend” prints:

connect this.clientDatabase : {"dataChange":{"_isScalar":false,"observers":[],"closed":false,"isStopped":false,"hasError":false,"thrownError":null,"_value":[{"id":13,"fname":"carkade","mname":null,"lname":"wijesinghe","title":"2","email":"[e-mail]","emailNew":null,"dob":"2017-08-28","gender":"1","mobile":"0714809448","country":{"code":"LK","name":"Sri Lanka"},"token":"ca5a33d2-fe73-41a8-aeab-368ce9e7ecfc","createdDate":1504593982000,"status":0,"password":"b83027a303a5f7dc20fb1a2d6ad2e046","salt":"iqTdlhHC+1j6/akmbVzOeg=="},{"id":19,"fname":"Sanka","mname":null,"lname":"wijesinghe","title":"4","email":"[e-mail]","emailNew":null,"dob":"2014-12-29","gender":"1","mobile":"0714809448","country":{"code":"LK","name":"Sri Lanka"},"token":"f5a57f2e-e4fa-4286-ac0f-3c99d2233894","createdDate":1505802532000,"status":0,"password":"7f67762dc47ea8caa9db115bc84ad7de","salt":"9MBDaNArbBKDOEvv8lsXgg=="},{"id":20,"fname":"Sanka","mname":null,"lname":"wijesinghe","title":"4","email":"[e-mail]","emailNew":null,"dob":"2010-12-27","gender":"1","mobile":"0714809448","country":{"code":"LK","name":"Sri Lanka"},"token":"2060e276-c64b-422e-9183-620042288e7c","createdDate":1505802706000,"status":0,"password":"915e307a8cf467767d6adbc60d868df7","salt":"puOmRu0RtGuiSGkfoS7F3g=="},{"id":22,"fname":"Sanka","mname":null,"lname":"wijesinghe","title":"2","email":"[e-mail]","emailNew":null,"dob":"2017-09-06","gender":"1","mobile":"0714809448","country":{"code":"LK","name":"Sri Lanka"},"token":"788ea560-7e8d-43bd-86fc-5e8d55842c2c","createdDate":1506444003000,"status":0,"password":"0b08fd68bcf839fc3564a025e1f97c20","salt":"CrReLqA8VQvyTwxtcAWZRA=="},{"id":23,"fname":"Sanka","mname":null,"lname":"wijesinghe","title":"2","email":"[e-mail]","emailNew":null,"dob":"2017-09-13","gender":"1","mobile":"[phone]","country":{"code":"LK","name":"Sri Lanka"},"token":"33af7107-dfe3-48cd-9c60-063480870889","createdDate":1506588235000,"status":0,"password":"9376bcf20a1b5ff1d7f6887944997b80","salt":"nBj6VsCmIlj5NJYRZUksBA=="}]}}

[willshowell]

@sanka76811 some things that may help you,

1. Try keeping the observable chain alive instead of transforming it into a promise. Since the data table uses observables to connect your data to the table, I personally find it easiest to exclusively use observable streams
2. Take a look at the example here. It demonstrates using Github’s api to retrieve repo issues and populate the table

@andrewseguin any reason that example hasn’t made it on the docs site yet?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}