I am currently working with Angular 2 (version 4.1.0), angularfire2, and ngx-datatable.
Within my component, I have a datatable that renders an Observable based on Angularfire2. Users can filter the data in the name column using a similar implementation to the ngx-datatable filter demo. When querying firebase for a new result set and attempting to assign this new Observable to the row model of the datatable, I encounter the following error:
ERROR TypeError: Cannot read property '0' of null
at DataTableBodyComponent../src/components/body/body.component.ts.DataTableBodyComponent.updateRows (index.js:4384)
at DataTableBodyComponent../src/components/body/body.component.ts.DataTableBodyComponent.recalcLayout (index.js:4599)
at DataTableBodyComponent.set [as rows] (index.js:4185)
at updateProp (core.es5.js:10966)
at checkAndUpdateDirectiveDynamic (core.es5.js:10726)
...
Expected behavior:
After applying a filter and retrieving the new Observable, I expect the datatable to render the updated data.
Key code snippets are provided below:
HTML, Datatable (using [rows]="rows | async" directive):
...
<ngx-datatable #table [rows]="rows | async"
[columnMode]="'flex'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'"
[limit]="10" class="material striped" [selected]="selected" [selectionType]="'single'"
(select)='onSelect($event)'>
...
The component logic:
@Input()
set onFilteringList (filter: string) {
this._onFilteringList = filter;
// Assigning the filtered data after rendering causes an error!
this.rows = this.workItemSrv.getFilteredByUserWorkItemList(this.onFilteringList);
}
ngOnInit() { // Operating fine here
if (this.onFilteringList) {
this.rows = this.workItemSrv.getFilteredByUserWorkItemList(this.onFilteringList);
} else {
this.rows = this.workItemSrv.getWorkItemList();
}
}
I have attempted three different methods to display a filtered result set:
Routing: using route parameters as filters seems promising, but the component is not reinitialized upon navigation. This leads to errors after the initial routing and table rendering (refer to the code snippets).
Using firebase query methods, it becomes challenging to define a query with parameters to retrieve either all items or a subset based on a filter. Employing two Observables with and without filters may be a solution, but swapping the row model results in the aforementioned error.
Utilizing rxjs filter method has not yielded success in applying a filter on the Observable.
None of these approaches have resolved my issue. How can I efficiently change the row model of the datatable or apply filtering directly on the Observable?
Thanks, Markus