Angular2嵌套循環來檢索Object.Object中的數組

-2

我想要在數據上動態地使用* NgFor循環來生成一個表。由於它是嵌套的JSON數據，我無法獲取數據。我在循環中搜索了很多問題，不知何故，我無法理解如何從下面的結構中獲取JSON數據，並在截圖的鏈接中獲取所需的輸出。Angular2嵌套循環來檢索Object.Object中的數組

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結構，低於該我存儲在變量說數據的表格.service.ts

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 
     } 
    ] 
}

}

如果有人發現這個問題的重複，請粘貼的答案作爲參考的鏈接。

在此先感謝。

來源

2017-09-06 ADITYA SHUKLA

圖片網址不是有效的 –

已編輯新鏈接。 –

我認爲它應該在對象good之下。所以它應該是：

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

依此類推。由於stationDetails是一個數組，所以應該有另一個循環。此外，您粘貼的鏈接將重定向到imgbb，而不是您想要的那個

來源

2017-09-06 17:46:05

如何動態生成此表格？現在我已經硬編碼了div和表格數據的數量。 –

你可以分享一下桌子嗎？ –

剛剛添加了表格。 –

Angular2嵌套循環來檢索Object.Object中的數組

回答

相關問題