无法读取 json 的对象类型答案

【问题标题】：fail reading object type of json无法读取 json 的对象类型
【发布时间】：2016-11-28 02:24:45
【问题描述】：

我有一个我无法读取的 Object 类型的 json...

这是我的 json：

body: {
    "111": {
        "name": "name1",
        "status": 10000
    },
    "222": {
        "name": "name2",
        "status": 20000
    },
    "333": {
        "name": "name3",
        "status": 30000
    }
}

我想知道如何在我的 html 中呈现它？

这是我的尝试：

<md-content>
    <h1 align="center">{{title}}</h1>
    <h2>list of items:</h2>
    <div class="list-bg"  *ngFor="#item of items | async">
        ID: {{item.name}} <p></p> Number of Items: {{item.status}}
    </div>
</md-content>

不仅它有效，我还试图弄清楚如何读取对象 id 的每一行（那些：111，222，333）

这是我的模型：

  export interface MyModel {
        name: string;
        status: number;
    }

这是我的组件：

export class MyCmp implements OnInit {
    retJson: Observable<MyModel[]>

    constructor(private _myService: MyService) {};

    public showData(): void {
        this.retJson = this._myService.getData();
    }
}

谢谢！

【问题讨论】：

你是如何加载这个 json 的？
@NitzanTomer iv 设置了一个模拟文件来保存我的 json，我使用 http GET 来检索它，使用 Observable im 在我的组件中订阅它。它适用于不同结构的 json
那么您需要将那段代码（加载 json）添加到您的问题中
@NitzanTomer 完成。
this._myService 的代码不包括在内，因此无法知道getData 是如何实现的。无论如何，我回答了一个更笼统的答案。您应该在问题中包含所有相关代码。

标签： html json typescript angular getjson

【解决方案1】：

你没有包括你如何加载你的 json，所以我会写一个更通用的例子：

interface MyModel {
    name: string;
    status: number;
}

interface MyResponse {
    body: { [id: string]: MyModel }
}

let response: MyResponse = JSON.parse(RESPONSE_STRING);
Object.keys(response.body).forEach(id => {
    let model = response.body[id];
    console.log(`id: ${ id }, name: ${ model.name }, status: ${ model.status }`);
});

这里缺少的是RESPONSE_STRING，我不确定你是怎么得到的。
至于模板，我不是角度开发人员，但据我了解ngFor 用于数组，并且您的 json 结构中没有数组。

【讨论】：

【解决方案2】：

ngFor 循环仅适用于数组。你的 body json 是键值对象，所以它不起作用。
如果你想让它工作，它是：
- 您使用额外的管道将键值对象转换为使用管道的数组，此处讨论的解决方案：Iterate over TypeScript Dictionary in Angular 2，然后您可以使用 *ngFor="let item of items | async | mapToIterable"
- 或者在你的 ts 文件中处理它，而不是 this.retJson = this._myService.getData();，使用this._myService.getData().subscribe(x => this.retJson = processToArray(x))

【讨论】：