*ngFor 模板 Ionic 2 中的对象 [重复]

Posted 2023-03-13

【中文标题】*ngFor 模板 Ionic 2 中的对象 [重复]

【英文标题】：*ngFor Object in template Ionic 2 [duplicate]

【发布时间】：2018-01-07 04:48:53

【问题描述】：

我有对象：

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>

在代码中我需要显示 KEY 和 VALUE

我的解决方案

在组件中：

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>

【问题讨论】：

NgFor 只支持绑定到数组等Iterables

【参考方案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>

【讨论】：

你是对的，我很抱歉。我可能是昏迷了

【参考方案2】：

如果您不想创建管道，您可以公开Object.keys，就像在this SO-answer 中一样。

您的组件：

@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