I implemented md-table (CDK) in my project connecting mysql db through
spring backend. Initially I integrate 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 coming through the
spring service, data view in the table correctly and filter option not
function. It gives script error as mentioned below. my service returns 5
records and following error appeared 4 times recursively. my connect()
method that fill the table with data as follows.
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;
});
});
}
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
`
<!-- 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>
`
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 <https://github.com/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:'[email protected]',
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 <https://github.com/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;
}
}
`
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":"[email protected]","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":"[email protected]","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":"[email protected]","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":"[email protected]","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":"[email protected]","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=="}]}}
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
