*ngFor Object in template Ionic 2

Question

I have object:

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

I have tried the below code but did't run please tell me where i am doing wrong.

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

In code i need show KEY and VALUE

My Solution

In component:

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

In view:

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

Answer 1

If you dont want to create a pipe you can expose Object.keys like in this SO-answer.

Your component:

@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

Answer 2

You can use a pipe like shown in 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>