Question

我有对象：

p {
  width: 200px;
  background-color: yellow
}

button {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: #FFFFFF;
  background-color: #323B5A;
  line-height: 18px;
  height: 24px;
  border: none;
  margin: 1px;
  text-decoration: none;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  display: block;
  width: 100%;
}

我已经尝试了以下代码但没有运行请告诉我我在哪里做错了。

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

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

我的解决方案

在组件中：

<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']);

Answer 1

如果您不想创建管道，可以在this SO-answer中公开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

Answer 2

您可以使用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>

* ngFor对象模板Ionic 2

2 个答案: