角2 ngForはインデックスで1つのオブジェクトを表示できません

Question

私のテンプレートのループに問題があります。部屋を1つ選択する必要があります（例えばキッチン）、部屋のタブで行を選択する必要があります。インデックスで要素を選択できないため、ループに問題があります。これは私のテンプレートです

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

      }, 

1つのタブは、すべてのルームロー情報を1つの部屋に表示する必要があります。インデックスを追加しようとしましたが、テンプレート行はオブジェクトのコレクションです。何か案は？

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など）を表示する必要があります。この時点で、私のプロジェクトのすべての部屋を表示するタブをクリックしてください。クリックするだけでどのようにチェックできますか？