I can't refresh the datasource for my mat table. I've declared it like this:
dataSource: MatTableDataSource<Custom_Data> = new MatTableDataSource();
where Custom_Data
is an interface I've created with custom fields. In ngOnInit I get the data from server and do this:
this.networkService.getCapitoliSelectItem(this.idContesto).subscribe(d => {
this.tableData= d;
this.tableData.forEach(c => {
//manipulate data
});
this.dataSource = new MatTableDataSource(this.tableData);
//put here to trigger detection of changes, not workin
this.changeDetector.detectChanges();
}
No data is shown on the table. Then I have a filter method, because in the header of my table I have two input fields that I use to filter the data in my table. In this case, if I write something the method filter is called and my data display in the table and everything works fine.
The filter method is:
applyFilter(filterValue: string, column: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
if(Number(filterValue.length) != 0){
this.dataSource.data = this.tableData.filter(d => d[column].toLowerCase().indexOf(filterValue)>-1);
} else {
this.dataSource.data = this.tableData;
}
}
Why is this working and not the ngOnInit method? I've also tried this.dataSource.data = this.tableData
instead of this.dataSource = new MatTableDataSource(this.tableData);
, but didn't work.