Angular2，Typescript，Json

Question

我将使用angular2平台开发一个应用程序。我被困在“如何在Angular2 Component的模板中打印嵌套的json”中。

json文件：

{
    "id": "0001",
    "type": "donut",
    "name": "Cake",
    "ppu": "0000.55",
    "batters":
        {
            "batter":
                [
                    { "id": "1001", "type": "Regular" },
                    { "id": "1002", "type": "Chocolate" },
                    { "id": "1003", "type": "Blueberry" },
                    { "id": "1004", "type": "Devil's Food" }
                ]
        },
    "topping":
        [
            { "id": "5001", "type": "None" },
            { "id": "5002", "type": "Glazed" },
            { "id": "5005", "type": "Sugar" },
            { "id": "5007", "type": "Powdered Sugar" },
            { "id": "5006", "type": "Chocolate with Sprinkles" },
            { "id": "5003", "type": "Chocolate" },
            { "id": "5004", "type": "Maple" }
        ]
}

如果有人帮助我，那真是太棒了...... :)

Answer 1

尝试这样的事情：

<div *ngFor="let obj of jsonData">
    <div>{{obj.id}}</div>
    ...
    <div *ngFor="let bat of obj.batters.batter">
        <div>{{bat.id}}</div>
        <div>{{bat.type}}</div>
    </div>

    <div *ngFor="let topp of obj.topping">
        <div>{{topp.id}}</div>
        <div>{{topp.type}}</div>
    </div>
</div>

您可以更改对象：

 ...,
 "batters": [
    { "id": "1001", "type": "Regular" },
    { "id": "1002", "type": "Chocolate" },
    { "id": "1003", "type": "Blueberry" },
    { "id": "1004", "type": "Devil's Food" }
  ],
  ...

然后你可以这样做：

<div *ngFor="let bat of obj.batters">

希望这会有所帮助。