*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

如果不想创建管道，可以公开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>

KEY: One
1
2
KEY: Two
1
2