Cannot find a differ supporting object

This particular message is a bit confusing. It's hard to figure out and it leaves little information. We see it often when using Mat-Table. There really should be a bug written to improve the error message.

We do get hints, however, usually we'll see something going on with the column definitions and or the displayed column definitions.

Root Cause
There's no data in the datasource! Apparently the column defs and displayed column bindings already bound, can't continue if there's no data!

Binding
Assume we have a component Employees, it contains a MatTable, but we have a parent component named Management. Management uses the Employees table which is to provide the people that are managers. The Manager's component is a decorator to Employees meaning it does other things too.

// This is in our manager's component
<app-employees
  [datasource]='datasource'
  [displayedColumns]="['firstName', 'lastName'...]
  [columnHeaders] = "['Mgr. First', 'Mgr. Last'...]"
</app-employees>

This Manager Component doesn't immediately have the datasource data, it takes a while for the data to return.

Before the data returns, both the ngInit and ngAfterViewInit run on both components. The displayedColumns and columnHeaders on the Employee Component immediately bind to what is specified in the markup shown above. However, when the material table attempts to render the data, the error happens because there are no fields in the dataSource, in particular the dataSource.data failed to display. Instead of displaying nothing it throws the error.

Solution
Don't show the component until the data has arrived! Promises and Observables take time to get the data, use *ngIf="dataHere" where dataHere is true or false. Set only after data has arrived. Also look into ChangeDetectorRef.DetectChanges().

JWP2020