Description
Bug, enhancement request, or proposal:
Bug report on mat-table
CodePen and steps to reproduce the issue:
If you don't pass an array as the data source to mat-table, it of course won't be able to show data, HOWEVER, if you later pass it an array of data, it still won't work i.e. it breaks until you restart the app or otherwise force the component to reload.
Detailed Reproduction Steps:
I'm using the standard pattern of creating a MatTableDataSource:
dataSource = new MatTableDataSource();
then pulling data from the db and assigning it like so:
this.dataSource.data = data;
As you can see in the stack trace image, i get the error "Cannot read property 'slice' of null as expected:
The underlying code in table.js line 861 is as follows:
What is the expected behavior?
If the data is bad (e.g. null), it should be resilient to display good data when reset.
What is the current behavior?
Table stops working.
What is the use-case or motivation for changing an existing behavior?
Even though I have code on the backend to ensure an empty array is passed, due to the complexity of scenarios, its possible the fail-safe code isn't hit and I get a bad result (null, undefined, etc.). On the front-end due to how mat-table behaves, I now have to sanity check the result as well. Ideally the mat-table itself would be resilient / tolerate occasional bad data.
Which versions of AngularJS, Material, OS, and browsers are affected?
using all latest / greatest as of 3.18.2020, namely:
angular material 9.1.3
angular 9.0.6
Browsers:
latest Chrome
Is there anything else we should know? Stack Traces, Screenshots, etc.
Hopefully the issue / request is apparent from looking at the stack trace. I don't have a stackblitz to offer at the moment but can work on it if warranted.