Angulaire 2 ngFor ne peut pas afficher un objet par index

Question

J'ai un problème avec la boucle dans mon modèle. Je dois sélectionner une roomRows dans les onglets pour une pièce (exemple Kitchen), et j'ai un problème avec loop, car je ne peux pas sélectionner les éléments par index. Ceci est mon modèle:

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

Et ceci fait partie de mon fichier 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 
           } 
         ] 
        }, 
       ] 

      }, 

Un onglet doit afficher toutes les informations roomRows dans une pièce. J'essaie d'ajouter un index mais ma ligne de template est une collection d'objets. Des idées?

Answer 1

Je suppose qu'il devrait être dans ce format

<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

Oui, mais je helpfull :) ai une autre question. S'il vous plaît chercher mon code:

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

onglet est ma chambre. Lorsque je clique sur l'onglet, je dois montrer le détail de la pièce (id, typeOfWorks, matertials, etc.). En ce moment, cliquez sur l'onglet me montrer chaque pièce de mon projet. Comment puis-je vérifier seulement un par clic?