I have a challenge with my Angular Material application. I am attempting to display a list of customers received from an API call. The app compiles successfully, but I keep encountering this error in the browser console:
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 could be causing this issue? I suspect it might relate to how I am populating the data in the table columns.
To tackle this problem, I created a 'Customers' interface structured as follows:
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;
}
Furthermore, I have developed a component where I aim to present my customers in a table showcasing these columns: Id, name, address, email, mailing, gdpr, tags.
Below is the code snippet from the component.ts file:
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();
}
}
}
Also, here's the HTML table code for the components:
<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>
...
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let element; columns: displayedColumns;"></tr>
</table>