Using *NgFor for table headings and using seperate *NgFor for rows and matching rows against the column

0
votes

We have a data structure that looks like the following (it's not actually this, but the same structure):

{
   "myData":{
      "dataItem1":[
         {
            "title":"Data Item 1 Title",
            "level":"4",
            "dataItem2":[
               {
                  "title":"Data Item 2 Title",
                  "dataItem3":[
                     {
                        "description":"A description for data item 3 "
                     },
                     {
                        "description":"Another description for data item 3  "
                     }
                  ]
               },
               {
                  "title":" Another Data Item 2 Title",
                  "dataItem3":[
                     {
                        "description":"A description for data item 3 "
                     },
                     {
                        "description":"Another description for data item 3  "
                     }
                  ]
               }
            ]
         }
      ]
   }
}

We need to display this data in a table so that dataItem2 Titles are across the header columns of our table and then the dataItem3 descriptions are in the first column of each row. Then for the corresponding column we want to place a marker in the corresponding column if the description belongs to that data item title.

Example below:

Table Style

We have used an ngFor to loop over the titles to display these in the columns and have given them an index. We then use a second ngFor to list the description in each row. What we were trying to do is compare the indexes in the ngiF and if they match then this would display the marker.

Problem: as the first loop is in the heading, this is closed directly after and we can no longer access the index later on in the ngIf. Is there a way we can still access the index or alternative way of doing this?

<section class="table-responsive">
   <table class="table table-bordered p-3">
      <thead>
         <tr>
            <th class="w-25"></th>
            <ng-container *ngFor="let item2 of dataItem1.dataItem2; index as h">
               <th class="" >{{item2.title + h}}</th>
            </ng-container>
         </tr>
      </thead>
      <tbody>
         <div *ngFor="let item2 of dataItem1.dataItem2; index as j">
            <tr *ngFor="let item3 of item2.dataItem3; index as k">
               <td class="w-25 option">{{item3.description}} {{j}} {{k}}</td>
               <td class="" *ngFor="let item2 of dataItem1.dataItem2">
                  <div *ngIf="h==j">
                     <i class="fa fa-check">{{h}}</i>
                  </div>
               </td>
            </tr>
         </div>
      </tbody>
   </table>
</section>
1
angularhtml-tablengfor

1 Answers

0
votes

Managed to fix this by adding an index ref on the item 2 td and then comparing that index with J instead of h.

        <tbody>
           <div *ngFor="let item2 of dataItem1.dataItem2; index as j">
              <tr *ngFor="let item3 of item2.dataItem3; index as k">
                <td class="w-25 option">{{item3.description}} {{j}} {{k}}</td>
                <td class="" *ngFor="let item2 of dataItem1.dataItem2; index as l">
                   <div *ngIf="l==j">
                      <i class="fa fa-check">{{h}}</i>
                   </div>
                 </td>
              </tr>
           </div>
        </tbody>    


       <td class="" *ngFor="let item2 of dataItem1.dataItem2; index as l">
          <div *ngIf="l==j">
             <i class="fa fa-check">{{h}}</i>
          </div>
        </td>