如何在记录详细视图中添加下一个和上一个控件？

Question

如果您单击任何记录行，您将看到记录的详细信息。

我想在下一行/上一行的详细信息上添加下一个和上一个按钮，而无需单击顶行。这样用户就不必再次单击回到顶行来查看详细信息。他们可以简单地使用下一个/上一个控件来查看下一个和上一个记录的详细信息。

我正在尝试这个但没有帮助。

<div *ngIf="isView" class="view-details">
    <button (click)="onPrev()">Prev</button>
<button (click)="onNext()">Next</button>

组件.ts

current = 0;
  prev = -1;

  onPrev() {
    this.prev = this.allUser.current--;
    alert("Prev" + this.prev);
  }
  onNext() {
    this.prev = this.allUser.current++;
    alert("Next" + this.prev);
  }

请帮我解决。

您可以在这里查看代码：https://stackblitz.com/edit/angular-ivy-1tsz1r?file=src%2Fapp%2Fapp.component.html

Answer 1

您可以在此StackBliz Link 中找到示例

在你的表格中点击我已经添加了新的方法参数，如下所示..

<tr class="record-row" (click)="viewUser(user, i, filteredUsers)"
                *ngFor="let user of filteredUsers;let i = index">

在你的组件中 viewUser() 方法是......

viewUser(user: any, index, filterData) {
  this.isView = true;
  console.log(user, index, filterData);
  this.userObj = user;
  this.currentIndex = index;
  this.allUserTableData = filterData;
}

在上面我添加了两个新的类变量currentIndex 和allUserTableData。基于这两个数据变量的下一个和上一个遍历看起来像下面的代码......

现在..下一个遍历代码是

nextRecord() {
   let next = (this.currentIndex += 1);
   if (next > this.allUserTableData.length - 1) {
     this.currentIndex = 5;
     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);
}