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中的某些内容，或者是否有人有更好或更健壮的方法来做到这一点。

Here是完整的代码，有关代码的更多信息（如果需要）。感谢您的帮助。

服务

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

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

1 个答案: