为什么我的下一个和上一个控件在分页时无法采用正确的索引？我需要做哪些改变？

Question

在我的代码中，当您单击任何记录时，您将看到详细信息。在详细信息中，有 2 个链接（上一个、下一个）可导航到前 n 个下一条记录。在第一页上它工作正常。但是，当我从分页导航到下一页并单击上一页时，它仍然采用第一页行索引，而下一页是从行而不是 select 行发生的。

您可以在这里查看：https://angular-ivy-hkrfyu.stackblitz.io/

    nextRecord() {
    let next = (this.currentIndex += 1);
    if (next > this.allUserTableData.length - 1) {
      this.currentIndex = 1;
      return;
    }
    let nextRecord = this.allUserTableData[next];
    this.userObj = nextRecord;
    console.log(nextRecord, next);
  }
  previousRecord() {
    let next = (this.currentIndex -= 1);
    if (next < 0) {
      this.currentIndex = 0;
      return;
    }
    let nextRecord = this.allUserTableData[next];
    this.userObj = nextRecord;
    console.log(nextRecord, next);
  }

<button (click)="previousRecord()">Previous</button> | <button (click)="nextRecord()">Next</button>

Answer 1

在此 StackBlitz Link

中找到工作示例

我在里面添加了新参数viewuser()

<tr class="record-row" (click)="viewUser(user, i, filteredUsers, 5, page)"

和 viewUser()

viewUser(user: any, index, filterData, itemsPerPage, currentPage) {
  console.log(itemsPerPage, currentPage);
  let currentPageIndex = currentPage;
  let recordPerPageToShow = itemsPerPage;

  let findCurrentRecordToSkip = (currentPageIndex - 1) * recordPerPageToShow;
  let countIndex = findCurrentRecordToSkip + recordPerPageToShow;

  console.log(
  "filter-pagination",
  filterData.slice(findCurrentRecordToSkip, countIndex)
  );

 this.isView = true;
 console.log(user, index, filterData);
 this.userObj = user;
 this.currentIndex = index;
 this.allUserTableData = filterData.slice(
  findCurrentRecordToSkip,
  countIndex
 );
}

为什么我的下一个和上一个控件在分页时无法采用正确的索引？我需要做哪些改变？

Why my next and previous control not able to take the correct index when paginating? What changes do I need to make?

javascript

navigation

typescript

angular