Nesting *ngFor in Angular allows for a powerful way

Question

Nesting *ngFor in Angular allows for a powerful way

I have a table that contains two nested iterations. The first three columns iterate through an array of objects (items), while the fourth column should iterate through an array of numbers (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 correctly, but I am experiencing issues with the array of numbers (total=[30,70,100]). I have tried placing the

(<ng-container *ngFor="let t of total">)

at different levels, however, it is not populating in the intended way. Any advice on how to resolve this issue would be greatly appreciated.

javascript angular typescript

Answer 1

Answer №1

If the indexes for the arrays are the same, you can effectively use the index to keep track of and repeat the elements.

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

Update: If the original poster is multiplying quantity by price to calculate the total, there's no need for a separate array. You can simply perform the multiplication in the view:

<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

If the indexes for the arrays are the same, you can effectively use the index to keep track of and repeat the elements.

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

Update: If the original poster is multiplying quantity by price to calculate the total, there's no need for a separate array. You can simply perform the multiplication in the view:

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

Answer №2

To properly populate the data, it is important to ensure that the td tag iterates correctly with the total value. The total variable should be clearly defined either as a property within the item object or as a separate variable. Here are examples for different scenarios:

If the total is a property of each item and you want to display it in a single td:

<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 the total is stored outside the item array and you want to display it in a single td:

<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 calculate the sum of the total values and display it in a single td (assuming total is a property of each item):

<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 calculate the sum of the total values stored outside the item array and display it in a single td:


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

Answer 4

To properly populate the data, it is important to ensure that the td tag iterates correctly with the total value. The total variable should be clearly defined either as a property within the item object or as a separate variable. Here are examples for different scenarios:

If the total is a property of each item and you want to display it in a single td:

<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 the total is stored outside the item array and you want to display it in a single td:

<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 calculate the sum of the total values and display it in a single td (assuming total is a property of each item):

<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 calculate the sum of the total values stored outside the item array and display it in a single td:


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

Nesting *ngFor in Angular allows for a powerful way

Answer №1

Answer №2

Similar questions

d3: It appears that my routes are replicating themselves, and I am unable to ascertain the cause

Trigger a jQuery event when a particular element has finished loading

Guide on establishing a connection to a server from a local database

How can I find the URL of a webpage that is not showing up in the search bar? Utilize Google Instant

Challenge encountered with asynchronous angular queries

submit a new entry to add a record to the database

Retrieving the data from the <input> tag using TypeScript

Replacing data in a Node server

Modify the buttons in the Angular Material Nav-bar according to the current page

Pausing or buffering an RxJS 6 observable when the page is inactive

How can we sort an array based on the inner HTML values of its children elements in JavaScript?

Transmit information using JSON format in Angular 8 using FormData

Error encountered while trying to update a record using NodeJS, Express, and MySQL modules due to SQL syntax

Guide to retrieving an object by its unique Id from the server and populating a Form in Angular Template

Having trouble with the functionality of expanding rows in Kendo grid

The canvas game's animation can only be activated one time

Incorporating fresh components and newly defined attributes in Angular

Attempting to save data to an external JSON file by utilizing fs and express libraries

What is the process for viewing the collections of all databases while logged in as an administrator?

Send data to local REST service with Jquery/Ajax for file upload