时间戳

首页 > 解决方案 > 分页时如何从数组中获取下一个id？

html - 分页时如何从数组中获取下一个id？

问题描述

我有一个翻页的按钮。我需要留在这个组件中，更改地址栏中的 ID，因此我将更改网站上的信息。数据来找我，看起来像这样：

{
 "users": [
  {
   "id": "3135",
   "name": "Lulu"
  },
 {
  "id": "8173",
  "name": "Lala"
 },
 {
  "id": "5783",
  "name": "Lolo"
 }
]

我通过获取 id 输出有关用户的详细信息。我的导航看起来像：

{ path: 'list', component: ListComponent },
{ path: '', redirectTo: '/list ', pathMatch: 'full' },
{ path: 'details/:id', component: DetailComponent }

我有一个按钮，通过按下从“/details/Id”到“details/nextId”的转换。但是这个按钮不起作用。这是对服务中下一个 ID 的请求。（我从数据库 API 获取数据）

private users: User[] = new Array<User>();
private locator = (u: User, id: number) => u.id === id;
getNextId(id: number): number {
 let index = this.users.findIndex(u => this.locator(u, id));
 if (index > -1) {
  return this.users[this.users.length > index + 2
   ? index + 1 : 0].id;
 } else {
  return id || 0;
 }}

HTML：

<button class="next-user" [routerLink]="['details', userService.getNextId(user.id)]" routerLinkActive="active">
    Next User
  </button>

详细信息列表组件：

 private userService: UserService,
private activeRoute: ActivatedRoute,
private location: Location,
private router: Router) {

activeRoute.params.subscribe(params => {
  this.detail = params['details'] === 'details';
  let id = params['id'];
  if (id !== null) {
    Object.assign(this.user, userService.getNextId(id));
  }
});
}
detail: boolean = true;

我搜索了互联网和here这个问题的答案，但发现只适合php。请帮我。我究竟做错了什么？我最近才开始研究 Angular 7，并不总是明白该怎么做。

我不知道如何正确解释它，如何解释我的问题。但我会尝试，我有一个页面显示我的用户列表。单击用户会打开一个包含更多详细信息的新页面。为了不返回包含用户列表的页面并且不选择下一个用户，包含有关用户的详细信息的页面假定存在“下一步”按钮。当我点击这个按钮时，数组被迭代，它由当前打开的页面的ID以及这个数组中的下一个ID决定，之后页面转到下一个ID。也就是说，打开了同一个页面，但上面的信息是关于在前一个用户之后跟随列表的另一个用户的信息。但是我的按钮目前不起作用，我不明白为什么。

标签： htmlangulartypescript

解决方案

我不明白您到底面临什么问题，但这里概述了如何通过单击按钮路由到下一个用户 ID。

// in Component.ts file
// import Router from @angular/router
import { Router } from '@angular/router';


constructor(private _router: Router){}

// to get the next user id
getNextId(id: number): number {
       
       // write your logic to get the next id here 
    
 }}
 
//navigate to user id 
getNextUser(id:number){

let nextId  = this.getNextId(id); // holds next id 

this._router.navigate([`/register-step2/${nextId}`]);

}
<!-- In Component.html  -->
<div class="userDetails">
 <p> {{user.name}} </p>
  <p> {{user.age}} </p>
   <p> {{user.occuption}} </p>
</div>
<button class="next-user" (click)="getNextUser(user.id)">
    Next Movie
  </button>

我假设每个用户 ID 服务都被调用并且服务的结果存储在user变量中。我希望它有帮助。

推荐阅读