`Incorporating ordered indices within two ngFor loops?`

Question

`Incorporating ordered indices within two ngFor loops?`

Below is a demo code where I am explaining my goal through comments:

product.component.html

<div *ngFor="let item of items1">
  <div *ngFor="let item of items2">     
      <input type="text" value="{{data[getNumber()]}}"> //I aim to fetch values from data[0] to data[6]
  </div>
</div>

product.component.ts

export class ProductComponent{

  itens1=["A","B","C","D"];
  itens2=["X","Y","Z"];
  data=[1,2,3,4,5,6,7];

  number=0;

  getNumber(){
    return this.number++;
  }

}

Here are the errors I am encountering:

https://i.sstatic.net/SullB.png

I trust that my issue has been elucidated clearly.

javascript angular typescript

Answer 1

Answer №1

The issue arises when the function getNumber() is invoked, resulting in a different output each time.

Each time Angular2 assesses the value of value during change detection, it fluctuates, never stabilizing. Angular2 interprets this behavior as an error. For a more detailed explanation, refer to this particular response.

The corrected code functions as intended. Notably, the getNumber function is now idempotent, consistently providing the same outcome for the same input. The input is derived from the loops utilizing the syntax let i = index.

@Component({
    selector: 'product',
    template: `
<div *ngFor="let item of items1; let i = index">
  <div *ngFor="let item of items2; let j = index">
      <input type="text" value="{{data[getNumber(i, j)]}}">
  </div>
</div>`
})
export class ProductComponent {
    items1 = ['A', 'B', 'C', 'D'];
    items2 = ['X', 'Y', 'Z'];
    data = [1, 2, 3, 4, 5, 6, 7];

    getNumber(i: number, j: number) {
        return i * this.items2.length + j;
    }
}

Answer 2

The issue arises when the function getNumber() is invoked, resulting in a different output each time.

Each time Angular2 assesses the value of value during change detection, it fluctuates, never stabilizing. Angular2 interprets this behavior as an error. For a more detailed explanation, refer to this particular response.

The corrected code functions as intended. Notably, the getNumber function is now idempotent, consistently providing the same outcome for the same input. The input is derived from the loops utilizing the syntax let i = index.

@Component({
    selector: 'product',
    template: `
<div *ngFor="let item of items1; let i = index">
  <div *ngFor="let item of items2; let j = index">
      <input type="text" value="{{data[getNumber(i, j)]}}">
  </div>
</div>`
})
export class ProductComponent {
    items1 = ['A', 'B', 'C', 'D'];
    items2 = ['X', 'Y', 'Z'];
    data = [1, 2, 3, 4, 5, 6, 7];

    getNumber(i: number, j: number) {
        return i * this.items2.length + j;
    }
}

`Incorporating ordered indices within two ngFor loops?`

Answer №1

Similar questions

Wait for a minimum of X milliseconds using RxJS

Updating the div#content dynamically with Jquery without the need to refresh the page

What is preventing the JavaScript "onblur" function from being triggered?

Utilizing fab-icons with CDN in Next.js version 13.4

Angular Iterate Array Forms

Switch up the text when the image link is being hovered over

How can scripts be used to enable fullscreen in PhoneGap?

Having issues with IE8 and SmoothGallery script errors

What might be causing the image links to malfunction on the server while functioning normally when offline?

How do I directly display a variable in index.html using node.js?

Injecting CSS styles into dynamically inserted DOM elements

Exploring arrays by filtering through various options chosen in a dropdown selection

Is there a way to use Regex to strip the Authorization header from the logging output

Implement a recursive approach to dynamically generate React components on-the-fly based on a JSON input

What is the best way to assign multiple event handlers to Solid.js components within a single HTML element?

Stop the slider when a video pops up

What are effective ways to eliminate script tags from a webpage?

Enhancing React Native experience by dynamically editing array elements

Why is npm installing a version of Angular CLI that is incompatible with its usage?

Using TypeScript, what is the best way to call a public method within a wrapped Component?