How to populate list in list in a table Angular-CodePudding

I have a list of values [1, paracetamol,[{1, location, quantity}, {2, location2, quantity}] so I have to print in two rows 1. [1, paracetamol, location, quantity] 2. [2. paracetamol, location1, quantity2]

I have maintained head headElements = ['Drug ID', 'Drug Name', 'Location', 'Quantity']

      <table   >
                        <thead>
                         <tr>
                             <th *ngFor="let head of headElements" scope="col">{{ head }}</th>
                          </tr>
                        </thead>
                        <tbody> 
                            <div *ngFor = "let drugDetail of drugList">

                                <tr  *ngFor="let loc of drugDetail.drugLocationList">
              
                                  <th scope="row">{{ drugDetail.drugId }}</th>
              
                                  <td>{{ drugDetail.drugName  }}</td>
              
                                   <td>{{loc.location}}</td>
                
                                  <td>{{ loc.quantity}}</td>
                                </tr>
                              </div>
        
                      </table>

output:

['Drug ID',                         'Drug Name', 'Location', 'Quantity']
[1, paracetamol, location, quantity]
[2. paracetamol, location1, quantity2]

CodePudding user response：

Maybe it could be easier if you do first a map to you array data, something like this:


copyDrugList = drugList.map(drugDetail => [
{  drugId    : drugDetail.drugLocationList[0].drugId   ,
   drugName  : drugDetail.drugName ,
   location  : drugDetail.drugLocationList[0].location ,
   quantity  : drugDetail.drugLocationList[0].quantity ,
},
{  drugId    : drugDetail.drugLocationList[0].drugId   ,
   drugName  : drugDetail.drugName ,
   location  : drugDetail.drugLocationList[1].location ,
   quantity  : drugDetail.drugLocationList[1].quantity ,
},
]);

Then, you only need to do a classic Angular HTML ngFor:

<tr *ngFor = "let drugDetail of copyDrugList ">
   <td>{{ drugDetail.drugId    }}</td>
   <td>{{ drugDetail.drugName  }}</td>
   <td>{{ drugDetail.location  }}</td>
   <td>{{ drugDetail.quantity  }}</td>
</tr>