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

Question

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

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

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

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

component.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

Inside you table tr click 我添加了新的方法参数，如下所示..

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

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

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

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

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

How to add next and previous control in the record detail view?

javascript

angular

typescript

navigationcontroller