Question

我正在尝试使用* NgFor循环数据动态生成表。由于它是嵌套的JSON数据，因此无法获取数据。我搜索了许多关于循环的问题，不知何故我无法理解如何从我下面的结构中获取JSON数据并在屏幕截图的链接中获得所需的输出。

file.component.html

<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
    <h5><b>Location1</b></h5>
    <div class="column">
        <div class="queue-total">
            <div class="column">
            </div>
            <div class="unassigned">
                <div>
                    <div class='unassigneddiv'>
                        <div class="mdl-grid">
                            <div class="mdl-cell mdl-cell--4-col">
                                <div class="populate-table">
                                    <div *ngFor="let item of data">
                                        <span>{{item.name}}</span>
                                    </div>
                                    <table>
                                        <tr *ngFor="let item of indexing">
                                            <td bgcolor='#f5696d'>
                                                <h6> {{ item.UrgentCount}} </h6>
                                            </td>
                                            <td bgcolor='#fcc777'>
                                                <h6> {{ item.indexingonTrackCount}} </h6>
                                            </td>
                                            <td bgcolor='#64c195'>
                                                <h6> {{ item.indexingnewCount}} </h6>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

所需的输出类似于 - https://i.imgur.com/mdGVNfB.png

这是我的JSON结构，我将其存储在table.service.ts的变量say data 中

JSON

<!-- lang-json -->  
{
"goods_1": {
    "queueName": "Category1",
    "totalCount": 300,
    "unassignedCount": 0,
    "stationDetails": [
        {
            "stationName": "Location1",
            "newCount": 100,
            "urgentCount": 50,
            "onTrackCount": 150
        },
        {
            "stationName": "Location2",
            "newCount": 100,
            "urgentCount": 50,
            "onTrackCount": 150
        },
        {
            "stationName": "Location3",
            "newCount": 100,
            "urgentCount": 50,
            "onTrackCount": 150
        },
        {
            "stationName": "Location4",
            "newCount": 100,
            "urgentCount": 50,
            "onTrackCount": 150
        },
        {
            "stationName": "Location5",
            "newCount": 100,
            "urgentCount": 50,
            "onTrackCount": 150
        }
    ]
},
"goods_2": {
    "queueName": "Category2",
    "totalCount": 300,
    "unassignedCount": 0,
    "stationDetails": [
        {
            "stationName": "Indexing",
            "newCount": 102,
            "urgentCount": 52,
            "onTrackCount": 152
        },
        {
            "stationName": "Incoming Review",
            "newCount": 102,
            "urgentCount": 52,
            "onTrackCount": 152
        },
        {
            "stationName": "2nd Incoming Review",
            "newCount": 102,
            "urgentCount": 52,
            "onTrackCount": 152
        },
        {
            "stationName": "Signature Impose",
            "newCount": 102,
            "urgentCount": 52,
            "onTrackCount": 152
        },
        {
            "stationName": "Signature Verification",
            "newCount": 100,
            "urgentCount": 50,
            "onTrackCount": 150
        }
    ]
},
"goods_3": {
    "queueName": "Category3",
    "totalCount": 300,
    "unassignedCount": 0,
    "stationDetails": [
        {
            "stationName": "Location1",
            "newCount": 103,
            "urgentCount": 53,
            "onTrackCount": 153
        },
        {
            "stationName": "Location2",
            "newCount": 103,
            "urgentCount": 53,
            "onTrackCount": 153
        },
        {
            "stationName": "Location3",
            "newCount": 103,
            "urgentCount": 53,
            "onTrackCount": 153
        },
        {
            "stationName": "Location4",
            "newCount": 103,
            "urgentCount": 53,
            "onTrackCount": 153
        },
        {
            "stationName": "Location5",
            "newCount": 103,
            "urgentCount": 53,
            "onTrackCount": 153
        }
    ]
},
"goods_4": {
    "queueName": "Category4",
    "totalCount": 300,
    "unassignedCount": 0,
    "stationDetails": [
        {
            "stationName": "Location1",
            "newCount": 104,
            "urgentCount": 54,
            "onTrackCount": 154
        },
        {
            "stationName": "Location2",
            "newCount": 104,
            "urgentCount": 54,
            "onTrackCount": 154
        },
        {
            "stationName": "Location3",
            "newCount": 104,
            "urgentCount": 54,
            "onTrackCount": 154
        },
        {
            "stationName": "Location4",
            "newCount": 104,
            "urgentCount": 54,
            "onTrackCount": 154
        },
        {
            "stationName": "Location5",
            "newCount": 104,
            "urgentCount": 54,
            "onTrackCount": 154
        }
    ]
}

}

如果有人发现此问题重复，请将答案的链接粘贴为参考。

提前致谢。

Answer 1

我认为它应该在对象good之下。所以它应该是：

<td><h6>{{good.stationDetails[0].stationName}}</h6></td>

等等。应该有另一个循环，因为stationDetails是一个数组。此外，您粘贴的链接重定向到imgbb，而不是您想要的

Angular2 Nested Loop在Object.Object

1 个答案: