Question

我有一个我不能阅读的对象类型的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();
    }
}

谢谢！

Answer 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结构中没有数组。

Answer 2

ngFor循环仅适用于数组。你的身体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))

读取json的对象类型失败

2 个答案: