Can NgFor accept dynamic keys as variables?

Question

Can NgFor accept dynamic keys as variables?

'Keys' (keys: any;) represent the headers extracted from 'data.items[0]' using the 'object.keys' method.

How can I properly loop through the objects in 'data.items'? Using *ngFor does not seem to work as expected.

Here is the desired outcome: https://i.sstatic.net/aqtlc.png

However, I encounter an error when trying to access 'item.header',

The property 'header' does not exist on the type '{ name: string; alias: string[]; qty: number; price: number; total: number; }'

If I use 'item[header]'

Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ name: string; alias: string[]; qty: number; price: number; total: number; }

CODE

Object

  private itemData: sale = {
    type: '',
    data: { date: ' ', InvoiceNo: ' ', tax: ' ' },
    total: { semitotal: 0, grandtotal: 0 },
    items: [
      { name: 'item 1', alias: ['01a'], qty: 0, price: 0, total: 0 },
      { name: 'item 2', alias: ['02a'], qty: 5, price: 250, total: 0 },
      { name: 'item 3', alias: ['03a'], qty: 6, price: 350, total: 0 },
      { name: 'item 4', alias: ['04a'], qty: 1, price: 150, total: 0 },
    ],
    params: {},
  };

Angular HTML Code

 <tbody>
        <tr *ngFor="let item of itemData.items" class="table-data" >
            <td *ngFor="let header of headers"> 
                <input type="text" [value]="item.header">  <---------- Issue
            </td>
        </tr>
 </tbody>

angular typescript

Answer 1

Answer №1

One approach is to define a specific type for the keys associated with an individual item, allowing you to easily index onto that item:

type ProductTableHeader = "name" | "quantity" | "description" | "price" | "total";

// Component logic
headers: ProductTableHeader[] = Object.keys(this.productData.items[0]) as ProductTableHeader[];

// Component Markup
<tbody>
  <tr *ngFor="let item of productData.items" class="table-row">
    <td *ngFor="let header of headers">
      <input type="text" [value]="item[header]" />
    </td>
  </tr>
</tbody>

Answer 2

One approach is to define a specific type for the keys associated with an individual item, allowing you to easily index onto that item:

type ProductTableHeader = "name" | "quantity" | "description" | "price" | "total";

// Component logic
headers: ProductTableHeader[] = Object.keys(this.productData.items[0]) as ProductTableHeader[];

// Component Markup
<tbody>
  <tr *ngFor="let item of productData.items" class="table-row">
    <td *ngFor="let header of headers">
      <input type="text" [value]="item[header]" />
    </td>
  </tr>
</tbody>

Answer 3

Answer №2

One possible approach would be as follows:

HTML code snippet

<tbody>
    <table class="table">
    <th *ngFor="let header of itemData.items[0] | keyvalue" class="table-data"> 
        {{header.key}}
    </th>
    <tr *ngFor="let item of itemData.items" class="table-data" >
       <td *ngFor="let r of item | keyvalue">
        <input type="text" [value]="r.value">
       </td>
    </tr>
</table>
</tbody>

Desired Output:

Answer 4

One possible approach would be as follows:

HTML code snippet

<tbody>
    <table class="table">
    <th *ngFor="let header of itemData.items[0] | keyvalue" class="table-data"> 
        {{header.key}}
    </th>
    <tr *ngFor="let item of itemData.items" class="table-data" >
       <td *ngFor="let r of item | keyvalue">
        <input type="text" [value]="r.value">
       </td>
    </tr>
</table>
</tbody>

Desired Output:

Can NgFor accept dynamic keys as variables?

Answer №1

Answer №2

Similar questions

Using a string array in a JSON model - a simple guide

Is it possible to utilize router-outlet within a component in a shared module?

The system encountered an issue while trying to access the property 'play' of null

EventListener cannot be removed

Creating dynamic Angular child routes with variable initial segment

"Develop a unique Angular 12 custom pipe that retrieves data through a service and converts it into a string instead of

What could be the reason for receiving a TS message stating "Property 'value' may not exist on type 'boolean'. Did you intend to use 'valueOf'?" while updating state using RTK in React?

Updating the FormArray index using Angular's `removeAt(i)` function does not reflect changes in the DOM

Is it possible to access 'import.meta' only within a module in an Angular micro front-end setup?

Execute a function using a click event within a statement

Using brackets around or after an expression in Typescript

Creating modern web applications using Angular and .Net Core with the power of Bootstrap 4

To ensure optimal functionality, it is recommended to invoke the Angular Array Observable on two separate occasions

Is there a way to refresh the current page in Ionic 3 when the browser is reloaded?

Communication between parents and children is crucial for building strong relationships and providing validation

What are some techniques for creating an HTML element that remains fixed on the page after scrolling past a certain height, even though it is originally part of

What is the best way to attach a function as an Angular filter predicate?

Ways to enhance a component by incorporating default properties in React/TypeScript

Upon initial page load, the distinctUntilChanged() function will not be triggered

Two-way data binding between TypeScript and HTML FormGroups