Angular 2 ngFor不能通過索引顯示一個對象

Question

我的模板中存在循環問題。我必須在一個房間的選項卡（例如廚房）中選擇一個房間行，並且我有循環問題，因爲我無法通過索引選擇元素。這是我的模板：

<tabset #staticTabs> 
<div *ngFor="let rooms of renovation"> 
    <div *ngFor="let room of rooms.rooms;let i = index"> 
     <tab heading="{{room.roomName}} {{i}}" [attr.data-index]="i"> 
      <div *ngFor="let row of room.roomRows"> 
       {{row.typeOfWorks | json}}{{i}} 
      </div> 
     </tab> 
    </div> 
</div> 
</tabset> 

這是我的json文件的一部分。

   'name': 'remont', 
       'zipCode': 500, 
       'rooms': [ 
        { 
         "roomId": 1, 
         "roomName": "Kitchen", 
         "roomRows": [ 
           { 
           "id": 1, 
           "typeOfWorks": "Malowanie ścian", 
           "costOfMaterials": 1500, 
           "costOfWorks": 2100, 
           "accept": false 
           }, 
           { 
           "id": 2, 
           "typeOfWorks": "Podłogi", 
           "costOfMaterials": 2650, 
           "costOfWorks": 1800, 
           "accept": true 
           }, 
           { 
           "id": 3, 
           "typeOfWorks": "Okna", 
           "costOfMaterials": 1200, 
           "costOfWorks": 450, 
           "accept": true 
           }, 
           { 
           "id": 4, 
           "typeOfWorks": "Drzwi", 
           "costOfMaterials": 850, 
           "costOfWorks": 250, 
           "accept": true 
           } 
         ] 
        }, 
        { 
         "roomId": 2, 
         "roomName": "Toilet", 
         "roomRows": [ 
           { 
           "id": 1, 
           "typeOfWorks": "Malowanie ścian", 
           "costOfMaterials": 1524500, 
           "costOfWorks": 30, 
           "accept": false 
           }, 
           { 
           "id": 2, 
           "typeOfWorks": "Podłogi", 
           "costOfMaterials": 5650, 
           "costOfWorks": 14550, 
           "accept": true 
           }, 
           { 
           "id": 3, 
           "typeOfWorks": "Okna", 
           "costOfMaterials": 1200, 
           "costOfWorks": 450, 
           "accept": true 
           }, 
           { 
           "id": 4, 
           "typeOfWorks": "Drzwi", 
           "costOfMaterials": 850, 
           "costOfWorks": 250, 
           "accept": true 
           } 

         ] 
        }, 
        { 
         "roomId": 3, 
         "roomName": "Corridor", 
         "roomRows": [ 
          { 
           "id": 1, 
           "typeOfWorks": "Malowanie ścian", 
           "costOfMaterials": 1500, 
           "costOfWorks": 2100, 
           "accept": false 
           }, 
           { 
           "id": 2, 
           "typeOfWorks": "Podłogi", 
           "costOfMaterials": 2650, 
           "costOfWorks": 1800, 
           "accept": true 
           }, 
           { 
           "id": 3, 
           "typeOfWorks": "Okna", 
           "costOfMaterials": 1200, 
           "costOfWorks": 450, 
           "accept": true 
           }, 
           { 
           "id": 4, 
           "typeOfWorks": "Drzwi", 
           "costOfMaterials": 850, 
           "costOfWorks": 250, 
           "accept": true 
           } 
         ] 
        }, 
         { 
         "roomId": 4, 
         "roomName": "Bathroom", 
         "roomRows": [ 
          { 
           "id": 1, 
           "typeOfWorks": "Malowanie ścian", 
           "costOfMaterials": 1500, 
           "costOfWorks": 2100, 
           "accept": false 
           }, 
           { 
           "id": 2, 
           "typeOfWorks": "Podłogi", 
           "costOfMaterials": 2650, 
           "costOfWorks": 1800, 
           "accept": true 
           }, 
           { 
           "id": 3, 
           "typeOfWorks": "Okna", 
           "costOfMaterials": 1200, 
           "costOfWorks": 450, 
           "accept": true 
           }, 
           { 
           "id": 4, 
           "typeOfWorks": "Drzwi", 
           "costOfMaterials": 850, 
           "costOfWorks": 250, 
           "accept": true 
           } 
         ] 
        }, 
       ] 

      }, 

一個選項卡必須顯示所有roomRows信息到一個房間。我嘗試添加索引，但我的模板行是對象的集合。有任何想法嗎？

Answer 1

我想這應該是這種格式

<div *ngFor="let rooms of renovation.rooms; let i = index"> 
    <div *ngFor="let row of rooms.roomRows; let j = index"> 
     {{row.typeOfWorks | json}}{{i}} {{j}} 
    </div> 
</div> 

https://plnkr.co/edit/iTtaU4pU07TsQbRwHJ2G?p=preview

Answer 2

是的，有幫助:)但我有一個問題。請看我的代碼：

<tabset #staticTabs> 

     <div *ngFor="let rooms of renovation"> 
      <div *ngFor="let room of rooms.rooms;let i = index"> 
       <tab heading="{{room.roomName}} {{i}}" [attr.data-index]="i"> 
        <ul *ngFor="let row of room.roomRows; let j = index"> 

            <li>{{row.id}}</li> 
            <li>{{row.typeOfWorks}}</li> 
            <li>{{row.costOfMaterials}}</li> 
            <li>{{row.costOfWorks}}</li> 
            <li>{{row.accept}}</li> 

        </ul> 
       </tab> 
      </div> 

     </div> 

    </tabset> 

標籤是我的房間。當我點擊標籤時，必須顯示房間的細節（id，typeOfWorks，matertials等）。此時點擊選項卡顯示我的項目中的每個房間。我怎樣才能通過點擊只檢查一個？