角嵌套 *ngFor

Question

I am having a table with two nested iterations, the first three columns where an array of object (item) iterates, and a fourth column is where an array of numbers should iterate ( total=[30,70,100] )

<table class="table"> 
    <thead class="thead-dark"> 
        <tr>
            <th>Item</th>
            <th>Unit Price</th>
            <th>Quantity</th>
            <th>Amount</th>    
        </tr>        
    </thead>

    <tbody>        
        <tr *ngFor="let i of item">  

            <td>{{i.product}}</td>
            <td>{{i.price}}</td>
            <td>{{i.quantity}}</td>

            <ng-container *ngFor="let t of total">
                <td>{{t}}</td>
            </ng-container>

        </tr>
    </tbody>
</table>

The object array iterates fine, however, the problem is with the array of numbers ( total=[30,70,100] ), I tried to place the ( ng-container *ngFor="let t of total" ) on different levels, but it always getting populated in a wrong way, I would appreciate advising me how to solve it.

Answer 1

Assuming your index level for the arrays are same, you can always use the index to track and repeat the element.

 <tr *ngFor="let i of item; let in=index"> <td>{{i.product}}</td> <td>{{i.price}}</td> <td>{{i.quantity}}</td> <ng-container *ngFor="let t of total[in]"> <td>{{t}}</td> </ng-container> </tr>

Edit: If the OP is multiplying quantity with price to come up with total then we don't need to maintain a separate array for that, we can just multiply it in the view and get it:

 <tr *ngFor="let i of item; let in=index"> <td>{{i.product}}</td> <td>{{i.price}}</td> <td>{{i.quantity}}</td> <td>{{i.price * i.quantity}}</td> </tr>

Answer 2

We may need more information on how the data should be populated, what I can see is that the td tag is repeating in a wrong way when iterates with the total, having more tds than th tags. Also the total variable is a property inside the item or is separated?. For now I can give you examples for some scenarios:

If you want to have the total in a single td and the total is a property of i

<tr *ngFor="let i of item">  

  <td>{{i.product}}</td>
  <td>{{i.price}}</td>
  <td>{{i.quantity}}</td>
  <td>{{i.total.join(,)}}</td>
</tr>

If you want to have the total in a single td and the total is just a variable outside the item array.

<tr *ngFor="let i of item let index = index">  

  <td>{{i.product}}</td>
  <td>{{i.price}}</td>
  <td>{{i.quantity}}</td>
  <td>{{total[index]}}</td>
</tr>

If you want to have sum the total in a single td and the total is a property of i

<tr *ngFor="let i of item">  

  <td>{{i.product}}</td>
  <td>{{i.price}}</td>
  <td>{{i.quantity}}</td>
  <td>{{i.total.reduce((a, b) => a + b, 0)}}</td>
</tr>

If you want to have sum the total in a single td and the total is just a variable outside the item array.

<tr *ngFor="let i of item let index = index">  

  <td>{{i.product}}</td>
  <td>{{i.price}}</td>
  <td>{{i.quantity}}</td>
  <td>{{total[index].reduce((a, b) => a + b, 0)}}</td>
</tr>