ngFor 与 Pagination 一起使用时的索引问题答案

【问题标题】：Index issue of ngFor when used with PaginationngFor 与 Pagination 一起使用时的索引问题
【发布时间】：2019-08-23 07:02:01
【问题描述】：

我正在使用分页和 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。感谢任何帮助。

【问题讨论】：

那么您的预期输出是什么？
请填写minimal reproducible example
它只显示从0到10的备注数组中的数据。但是假设我在testdata中有50个数据。那么它应该在0到50的备注中显示数据。这就是问题跨度>

标签： javascript angular

【解决方案1】：

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

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

如果您不明白，请尝试上面的一个，让我知道我会编辑它。

【讨论】：

感谢您的回答，但问题仍然相同。假设我的测试数据中有 50 个对象，然后我将有 5 页，因为 itemsPerPage 是 10。但我的问题是让 i=index。例如;当我点击第二页时，索引的 i 应该是 11-20，但对于每一页，“i”只是从 0 到 10。感谢任何帮助。
每一页的“i”只有0到10。确实可以使用pageIndex和pageSize来计算索引。

【解决方案2】：

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

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

所以，先用简单的 UL/Li 试试吧

【讨论】：

这与分页无关。问题是让 i = 索引。假设我在 testdata 中有 50 个对象。然后我将有 5 页。然后假设我打开第二页。作为索引的 i 应该是 11，但它又是 1。所以对于每一页的索引是从 0-10

【解决方案3】：

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

【讨论】：

这就是我想要找到的。谢谢。

【解决方案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>

这可能是一个解决方案。

【讨论】：