获取激活路线上的下一个数据

Question

我有两个组件TodosComponent和TodoDetailsComponent。单击TodosComponent中的一个项目会将我带到TodoDetailsComponent，并在组件ngOnInit中获取参数以获取适当的数据。现在，在细节组件中，我有了下一个按钮，我从中增加id并通过router.navigate获得结果。一切正常。下面是TodoDetailsComponent

TodoDetailsComponent.ts

export class TodoDetailsComponent implements OnInit{
todo;
id;
constructor(private activatedRoute: ActivatedRoute, private service: Service, private router: Router) { }
ngOnInit() { 
this.activatedRoute.paramMap.pipe(
switchMap(params => {
this.id = +params.get('todoId');
return this.getTodo(+params.get('todoId'))
})
).subscribe(todo => this.todo = todo);
}
getTodo(id) {
return this.service.getTodo(id);
}
next() {
this.router.navigate(['/todos', this.id+1])
}

我想知道的是，在现实生活中，比如在MongoDB中，id的顺序与本例没有什么不同。为了克服这一点，我尝试映射对象，并在我的服务中按顺序隐式添加todoId，而不是基于id进行导航，而是基于todoId进行导航。

这样做可以吗，或者我在Angular中遗漏了一些我不知道的东西，或者是否有人有更好或更稳健的方法来做到这一点。

如果需要，下面是完整的代码以获取有关代码的更多信息。感谢您的帮助。

服务

getTodos() {
let todoId = 0;
return this.http.get<any>(`${this.url}`)
.pipe(
map(todos => todos.map(todo => ({...todo, todoId: ++todoId}))
)
}

Answer 1

如果您的数据采用以下格式：

data = [ { name: 'bob', age: 21 }, { name: 'alice', age: 22 }, { name: 'eric', age: 23 }, ];

也许你可以试试这样的东西：

export class AppComponent implements OnInit {
index = 0;
data = [
{
name: 'bob',
age: 21
},
{
name: 'alice',
age: 22
},
{
name: 'eric',
age: 23
},
];
data$: Observable<any>;
ngOnInit() {
this.data$ = of(this.data);
}
previous() {
if (this.index > 0) {
this.index--;
}
}
next() {
if (this.index < this.data.length - 1) {
this.index++;
}
}
}

<div *ngIf="data$ | async as item">
<p>{{ item[index]?.name }}</p>
<p>{{ item[index]?.age }}</p>
</div>
<button (click)="previous()">Previous</button>
<button (click)="next()">Next</button>

你可以在这里试试：https://ng-run.com/edit/HyzjWGNl9xM9Jg2aR90w