* ngFor模板离子2

Question

对象我有对象：

messages = [{ 
    'One' : [ 
     {'id' : 1}, 
     {'id' : 2}, 
    ], 
    'Two' : [ 
     {'id' : 1}, 
     {'id' : 2}, 
    ] 
}] ; 

我曾尝试下面的代码，但我以前不运行，请告诉我，我做错了。

<div *ngFor="let message of messages"> 
    <div>KEY</div> 
    <div *ngFor="let value of message">VALUE</div> 
</div> 

在代码我需要显示的键和值

我的解决办法

在组分：

this.messages = data['messages'] ; 
this.keys = Object.keys(data['messages']); 

鉴于：

<div *ngFor="let key of keys"> 
    <div>{{key}}</div> 
    <div *ngFor="let message of messages[key]">{{message['id']}}</div> 
</div> 

Answer 1

您可以使用管道一样显示在How to iterate [object object] using *ngFor in Angular 2

<div *ngFor="let message of messages"> 
    <div>KEY</div> 
    <div *ngFor="let key of message | keys">{{message[key]}}</div> 
</div> 

Answer 2

如果你不想创建您可以在this SO-答案暴露Object.keys像管。

你的组分：

@Component({ 
    ... 
}) 
export class YourComponent{ 
    objectKeys: any = Object.keys; 
    messages: Array<any>; 

    constructor(){} 

    ... 
} 

HTML：

<div *ngFor="let message of messages"> 
    <div *ngFor="let key of objectKeys(message)"> 
     <div>KEY: {{ key }}</div> 
     <div *ngFor="let val of message[key]">{{ val.id }}</div> 
    </div> 
</div> 

OUTPUT：

KEY: One 
1 
2 
KEY: Two 
1 
2