Index issue of ngFor when used with Pagination

Question

I am using pagination and ngFor along with searchPipe. The problem is with index of ngFor. My paginator shows 10 items per page, but problem is when I go to second page index of ngFor returns to the 0. So I can only iterate from 0-10 elements basically for each page from my data set. Any help is appreciated.

 <tr *ngFor="let item of testdata | customStoreFilter:searchRetail | paginate: { itemsPerPage: 10, currentPage: p };let i = index"
          [ngClass]="eachmodel[i] ? 'active': ''" id="row{{i}}">
<td>
            <textarea  [(ngModel)]='remarks[i]'
              (change)="isRemarksModelChanged($event.target.value,i,item)"></textarea>
          </td>
</tr>

So let i = index part is not working correctly. Lets say I have 50 items in my testdata. It should iterate from 0 to 50, instead it goes from 0 to 10th element in each page since itemsPerPage is 10. Any help is appreciated.

Answer 1

I am writing for angular 4+, refering [ngx-pagination][1],

<div class="list">
    <ul>
        <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: page };index as i">
    <span *ngIf="page==1">{{(i+1)}}{{item}}</span>
    <span *ngIf="page>1">{{((page-1)*10)+(i+1)}}{{ item }}</span>
  </li>
    </ul>

    <pagination-controls (pageChange)="page =$event">
</pagination-controls>

 export class AppComponent {
  page:number = 1;
  collection = [];
  constructor() {
    for (let i = 1; i <= 100; i++) {
      this.collection.push(`item ${i}`);
    }
  }
}

Answer 2

If i understood your question correctly this what you want.

<tr
  *ngFor="let item of testdata | customStoreFilter:searchRetail | paginate: { itemsPerPage: 10, currentPage: p };index as i"
  [ngClass]="eachmodel[i] ? 'active': ''" id="row{{i}}">
  <td>
    <textarea [(ngModel)]='remarks[i]' (change)="isRemarksModelChanged($event.target.value,i,item)"></textarea>
  </td>
</tr>

Try the above one if you didn't understand let me know i will edit it.

Answer 3

Exactly I don't know where you want to show List of items per page but have you added pagination control like below:

<pagination-controls (pageChange)="p = $event"></pagination-controls>.

So, try it with simple UL/Li first

Answer 4

<tr *ngFor="let user of users | paginate:  { itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: totalItems }; let j = index;">
    <th scope="row">{{ (currentPage - 1) * itemsPerPage + j + 1 }}</th>
    <td>{{user.username}}</td>
    <td>{{user.email}}</td>
    <td>
    </td>
  </tr>

It could be a solution.

Answer 5

write a method in your component.ts file:

getIndex(i: number) {
let pageCorrection: number;
let indexPerPage = 10;
if (this.p === 1) {
  pageCorrection = 0;
} else {
  pageCorrection = (this.p - 1) * indexPerPage;
}
return i + 1 + pageCorrection;

}

use it in your component.html file:

<div *ngFor="let item of testdata | paginate: { itemsPerPage: 10, currentPage: p };let i = index">
<span *ngIf="page>=1">{{getIndex(i)}}</span> 
</div>