在 Angular 中单击分页结果时获取索引时出现问题

问：

我遇到了一些问题，在我的应用程序中，我有一些分页结果，但是当我在 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>

有什么想法吗？