Tengo una lista de valores [1, paracetamol,[{1, ubicación, cantidad}, {2, ubicación2, cantidad}] así que tengo que imprimir en dos filas 1. [1, paracetamol, ubicación, cantidad] 2. [ 2. paracetamol, ubicación1, cantidad2]
He mantenido head headElements = ['Drug ID', 'Drug Name', 'Location', 'Quantity']
<table class="table table-striped" > <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>producción:
['Drug ID', 'Drug Name', 'Location', 'Quantity'] [1, paracetamol, location, quantity] [2. paracetamol, location1, quantity2]Tal vez podría ser más fácil si primero hace un mapa de los datos de su matriz, algo como esto:
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 , }, ]);Luego, solo necesita hacer un HTML angular clásico ngFor:
<tr *ngFor = "let drugDetail of copyDrugList "> <td>{{ drugDetail.drugId }}</td> <td>{{ drugDetail.drugName }}</td> <td>{{ drugDetail.location }}</td> <td>{{ drugDetail.quantity }}</td> </tr>