如何在Angular 4中使用* ngFor迭代json对象属性

Question

我需要使用* ngFor。

迭代这个JSON属性

这是我的JSON数据：

{
    "Id":1,
    "Time":"9:30",
    "Status":"Delivered",
    "Date":"20170623",
    "Quantity":2,
    "MetaDataStr":{
        "gender":true,
        "category":"Home Cook",
        "fullName":"Sachin patil",
        "imageURL":"ht/medias/57",
        "description":"hello"
    }
}

Answer 1

试试这个：

export class AppComponent {
    data = { "id": 1, "Time": "9:30", "Status": "Delivered", "Date": "20170623" };
    keys: string[];
    ngOnInit() {
        this.keys = Object.keys(this.data);
    }
}

// In template:

<div *ngFor="let prop of keys">
    <label> {{ prop }}:</label><div>{{ data[prop] }} </div>
</div>