Angular accessing nested objects values from compo

2019-09-18 07:55发布

问题:

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.