与分页一起使用时ngFor的索引问题 [英] Index issue of ngFor when used with Pagination

问题描述

我正在使用分页和ngFor以及searchPipe.问题出在ngFor的索引上.我的分页器每页显示10个项目，但是问题是当我转到ngFor的第二页索引时返回0.因此，对于我的数据集中的每个页面，我基本上只能从0-10个元素进行迭代.感谢您的帮助.

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>

所以让我=索引部分无法正常工作.可以说我的测试数据中有50个项目.它应该从0到50进行迭代，而由于itemsPerPage为10，所以它应从每个页面的0到第10个元素进行迭代.

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.

推荐答案

我正在编写角度为4+的文字，引用的是[ngx-pagination] [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}`);
    }
  }
}

这篇关于与分页一起使用时ngFor的索引问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！