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)

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

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:'carkade@gmail.com',
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 {
/** 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;
}
}

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":"carkade@gmail.com","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":"sanka@gmil.com","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":"sanka.w@gmail.com","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":"info@carkade.com","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":"sdasdasd@ddd.com","emailNew":null,"dob":"2017-09-13","gender":"1","mobile":"+94-1111111111","country":{"code":"LK","name":"Sri Lanka"},"token":"33af7107-dfe3-48cd-9c60-063480870889","createdDate":1506588235000,"status":0,"password":"9376bcf20a1b5ff1d7f6887944997b80","salt":"nBj6VsCmIlj5NJYRZUksBA=="}]}}