Angular Material table not showing data, giving _columnCssClassName is not iterable error

I have an Angular Material app that where I am trying to show all the customers that I get from an API call... My app compiles but in the browser console I keep getting this error:

ERROR Error: Uncaught (in promise): TypeError: columnDef._columnCssClassName is not iterable (cannot read property undefined) TypeError: columnDef._columnCssClassName is not iterable (cannot read property undefined)
​

What am I doing wrong? I suspect it has something to do how I'm feeding the data to table columns

I have created an interface called Customers with the following structure:

export interface Customers {
_links: {
first: {
href: string;
};
last: {
href: string;
};
next: {
href: string;
}
self: {
href: string;
};
};
_embedded: {
customers: [
{
id: string;
internal_id: string;
name: string;
name2: string;
address: string;
address_post_nr: string;
phone: string;
email: string;
gdpr: string,
mailing: string,
tags: string;
}
]
};
page: number;
page_count: number;
page_size: number;
total_items: number;
}


then I have created a component where I would like to show my customers in a table with these columns: Id, name, address, email, mailing, gdpr, tags

here is the component.ts file code:

export class CustomersComponent implements OnInit, OnDestroy{

displayedColumns: string [] = ['Id', 'name', 'address', 'email', 'mailing', 'gdpr', 'tags'];
public dataSource: MatTableDataSource<Customers["_embedded"]>;

private customerSubscription: Subscription;

@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;

private dataArray: any;
constructor(
private customersServcice: CustomersService,
)
{ }

ngOnInit() {
this.getAllCustomers();
}

getAllCustomers() {
this.customerSubscription = this.customersServcice.getAllCustomersList().subscribe(
(res) => {
console.log('res: ', res);
this.dataArray = res;
this.dataSource = new MatTableDataSource<Customers["_embedded"]>(this.dataArray);
console.log('this.dataSource: ', this.dataSource);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
}

ngOnDestroy() {
if(this.customerSubscription) {
this.customerSubscription.unsubscribe();
}
}
}


And here is the components html table code:

<table mat-table [dataSource]="dataSource" class="crm-table mat-elevation-z0">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> Id </th>
<td mat-cell *matCellDef="let element" class="left-text"> {{element.id}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element" class="left-text"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef> Address </th>
<td mat-cell *matCellDef="let element" class="left-text"> {{element.address}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> Email </th>
<td mat-cell *matCellDef="let element" class="left-text"> {{element.email}} </td>
</ng-container>
<ng-container matColumnDef="mailing">
<th mat-header-cell *matHeaderCellDef> Mailing </th>
<td mat-cell *matCellDef="let element" class="left-text"> {{element.mailing}} </td>
</ng-container>
<ng-container matColumnDef="gdpr">
<th mat-header-cell *matHeaderCellDef> GDPR </th>
<td mat-cell *matCellDef="let element" class="left-text"> {{element.gdpr}} </td>
</ng-container>
<ng-container matColumnDef="tags">
<th mat-header-cell *matHeaderCellDef> Tags </th>
<td mat-cell *matCellDef="let element" class="left-text"> {{element.tags}} </td>
</ng-container>
<ng-container matColumnDef="">
<th mat-header-cell *matHeaderCellDef> </th>
<td mat-cell class="left-text"> + </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let element; columns: displayedColumns;"></tr>
</table>

Continue reading...