0

In the loop body in the code below:

<ul>
   <li *ngFor="let article of articles; index as i">
       <a>{{ articles[i].title }} -- {{i}}</a>
       <p>{{ articles[i].body }}</p>
       <!-- i++ -->  
       <p>{{ i }}</p>
   </li>
</ul>

Is there anyway to store the value of i++ at that position, then print out new value of i?

Then, i's value is updated with the new value and used in the next loop. I would like to loop 2 elements at a time, not just one.

It's just like what we can do in Java as below:

for (int i = 0; i < 10; i++) {
    System.out.println(i);
    i++;
    System.out.println(i);
}

1st loop:

0

1

2nd loop:

2

3

and so on..

I found the solution, which is in this link: Looping through list two at a time using *ngFor

Solution: split array into a 2-dimensional array, it's easy to loop using ngFor

Trung Bún
  • 1,117
  • 5
  • 22
  • 47
  • 3
    Why not just render

    {{ i+1 }}

     – noitse Oct 11 '18 at 08:57
  • 2
    template should never change values unless it is done in event binding e.g. `(click)` – smnbbrv Oct 11 '18 at 08:57
  • The reason why `

    {{ i+1 }}

    ` is not usable is that I would like to process 2 element at a time. Not just one     – Trung Bún Oct 11 '18 at 08:59
  • 1
    Then please edit your question, and write exact result you want to achieve. All we can see is that you want to render 'i' with +1. – noitse Oct 11 '18 at 09:01
  • you can't do it like this. complex way to do.If you relly want i can help – Asanka Oct 11 '18 at 09:09
  • 1
    It's not really good practice to change the iteration values inside a loop. It's better to have for example an `*ngIf="i % 2 === 0"` before the code you want to display (if you want to display all even indexes). – ShamPooSham Oct 11 '18 at 09:10
  • 1
    Ok, next time you should actually try to search for the answer before asking the question. https://stackoverflow.com/questions/43234417/looping-through-list-two-at-a-time-using-ngfor – noitse Oct 11 '18 at 09:11
  • 1
    @noitse excellent post!! thanks very much!! – Trung Bún Oct 11 '18 at 09:21
  • check this question [Angular 2: How to write a for loop, not a foreach loop](https://stackoverflow.com/questions/36095496/angular-2-how-to-write-a-for-loop-not-a-foreach-loop) – Exterminator Oct 11 '18 at 10:04

2 Answers2

1

If question stays relevant, for those who are seeking the answer, I would recommend you to refer to this post: Looping through list two at a time using *ngFor

The post is not mine, but it shows a simple solution using the pipeline.

noitse
  • 1,045
  • 9
  • 27
1

Use this function to transform your data to the type of structure you want to access it.

someData = [1,2,3,4,5,6];

transformData(data) {
    let temp = []
    for(let i = 0; i < data.length; i++) {
      let temp2 = [];
      temp2.push(this.data[i]);
      i++;
      temp2.push(this.data[i])
      temp.push(temp2);
    }
    return temp;
  }

then access it in your html like this

<p *ngFor="let data of transformData(someData)">
{{data[0]}}, {{data[1]}}
</p>
Kaleab
  • 367
  • 1
  • 4
  • 13