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

Question

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

你可以在这里查看：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>

标签： javascriptangulartypescriptnavigation

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
 );
}