如何在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>