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>

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

Answer 1

我正在写角度为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}`);
    }
  }
}

Answer 2

如果我正确理解了您的问题，这就是您想要的。

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

如果您不理解，请尝试上面的一个，让我知道我会对其进行编辑。

Answer 3

我确实不知道您要在哪里显示每页的项目列表，但是您是否添加了如下所示的分页控件：

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

因此，首先尝试使用简单的UL / Li

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>

这可能是一个解决方案。

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

4 个答案: