javascript - ngFor 与分页一起使用时的索引问题

Question

我正在使用分页和 ngFor 以及 searchPipe。问题出在 ngFor 的索引上。我的分页器每页显示 10 个项目，但问题是当我转到第二页时，ngFor 的索引返回到 0。所以我基本上只能从数据集中的每个页面迭代 0-10 个元素。如有任何帮助，我们将不胜感激。

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

所以让 i = 索引部分无法正常工作。假设我的测试数据中有 50 个项目。它应该从 0 迭代到 50，而不是从每个页面中的 0 到第 10 个元素，因为 itemsPerPage 是 10。感谢任何帮助。

Answer 1

我正在为 Angular 4+ 写作，引用 [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}`);
    }
  }
}