Angular 中单击分页结果时获取索引的问题

Question

我遇到了一些问题，在我的应用程序中我有一些分页结果但是当我在 ngFor 中添加变量 let i = index 时，我只能得到前 10 个项目的结果而不是分页项目？因此，如果我转到第 2 页并单击第一项，则索引再次为 1，因为我已经完成了索引 + 1.

到目前为止代码是：

import { Component, VERSION, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;
  collection: any;
  p: number;
  itemsPerPage = 10;
  totalItems: any;
  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.getAllData();
  }

    getIndex(i) {
    console.log(i + 1);
  }

  getAllData() {
    const url = `https://xxxx/api/houses?page=1&pageSize=${this.itemsPerPage}`;
    this.http.get(url).subscribe((data: any) => {
      console.log(data);
      this.collection = data;
      this.totalItems = 450;
    });
  }

  getPage(page) {
    const url = `https://xxxx/api/houses?page=${page}&pageSize=${this.itemsPerPage}`;
    this.http.get(url).subscribe((data: any) => {
      console.log(data);
      this.collection = data;
      this.totalItems = 450;
    });
  }
}

component.html

<ul>
    <li *ngFor="let item of collection | paginate: { itemsPerPage: itemsPerPage , currentPage: p, totalItems: totalItems }  let i = index"> {{item.name}}                     <button (click)='getIndex(i)'>Index</button>
    </li>
</ul>

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

有什么想法吗？

Answer 1

您可以像这样更新 getIndex 方法以计算总索引并考虑分页：

  getIndex(i) {
    let pageCoefficient;
    if (!this.p || this.p === 1) {
      pageCoefficient = 0;
    } else {
      pageCoefficient = (this.p - 1) * this.itemsPerPage;
    }
    console.log(i + 1 + pageCoefficient);
    return i + 1 + pageCoefficient;
  }

Stackblitz

Angular 中单击分页结果时获取索引的问题

Issue getting index on click of paginated results in Angular

javascript

pagination

server-side

angular