I want to fill an HTML table dynamically with data from a passed in object with Angular.
As long as I try to access values on the "first level" of my object, the code works fine. The problem is that I can not access values from nested objects. Anyone have a workaround?
table.component.ts:
setTable(headers: string[],attributes: string[], obj: any) {
this.obj = obj;
this.tableHeaders = headers;
this.attributes = attributes;
}
table.component.html:
<td *ngFor="let header of tableHeaders; let i = index" >{{ object[attributes[i]]}}</td>
a parent component:
this.table.setTable(
['First Name', 'Phone', 'City'],
['name', 'phone', '??????'], // Where ???? I have tried both address.street and address[street] and nothing is displayed, and when I try address [object Object] is displayed.
aUserObject
);
user.model.ts:
export class User {
id: number;
name: string;
phone: string;
email: string;
address: Address;
}
Where Address is also an object, with a property street
.