My typescript array population is not changing the background color of my div based on the values in the array. I've attempted to set the background using [style.backgroundColor]="statusColor[i]", where statusColor is an array declared in my typescript. This approach fails, unlike binding without an array to a single object as shown: [style.backgroundColor]="statusColor". The error message says: "Cannot read property '0' of undefined".
Below is the mentioned code:
export interface IComplaint {
id: string;
description: string
status: string
}
public complaints = {} as IComplaint[];
public statusColor: string[];
for (let i=0; i<this.complaints.length; i++) {
if (this.complaints[i].status === "Reported")
this.statusColor[i] = 'red';
else if (this.complaints[i].status === "Resolved")
this.statusColor[i] = 'green';
else if (this.complaints[i].status === "In progress")
this.statusColor[i] = 'yellow';
console.log(this.statusColor[i]);
}
This is how the HTML code looks like:
<mat-card class="card" *ngFor="let complaint of complaints; let i = index">
<div class="status" [style.backgroundColor]="statusColor[i]">
{{ complaint.status }}
</div>
</mat-card>
<div class="status" [style.backgroundColor]="statusColor[i]">
{{ complaint.status }}
</div>
The goal is for the background color to change according to the status.