Angular 无法读取属性'；指数'；在角度上未定义的

我在运行时遇到了这个错误。这些是我的代码片段。我跑了9英里

core.js:6237 ERROR TypeError: Cannot read property 'indexOf' of undefined
    at DishdetailComponent.setPrevNext (dishdetail.component.ts:31)
    at SafeSubscriber._next (dishdetail.component.ts:26)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)
    at SwitchMapSubscriber.notifyNext (switchMap.js:70)
    at InnerSubscriber._next (InnerSubscriber.js:11)
    at InnerSubscriber.next (Subscriber.js:49)
    at Notification.observe (Notification.js:20)

这是我的dishdeail.component.ts文件

dish: Dish;
  dishIds : string[];
  prev: string;
  next: string;

  constructor(private dishService: DishService, private route: ActivatedRoute, private location: Location) { }

  ngOnInit(): void {
    this.dishService.getDishIds().subscribe(dishIds => this.dishIds);
    this.route.params.pipe(switchMap((params: Params) => this.dishService.getDish(params['id']))).
    subscribe(dish => {this.dish=dish; this.setPrevNext(dish.id)});
  }

  setPrevNext(dishId: string){
    console.log(dishId);
    const index = this.dishIds.indexOf(dishId);
    this.prev = this.dishIds[(this.dishIds.length + index -1) % this.dishIds.length];
    this.next = this.dishIds[(this.dishIds.length+ index +1) % this.dishIds.length];
  }

  goBack(): void {
    this.location.back();
  }

---

dishIds:string[]

是一个数组，包含菜肴的字符串类型id。我需要遍历数组的索引，然后实现setPrevNext方法。在浏览器上运行时，会显示上述错误。请帮帮我。浏览器显示错误在setPrevNext方法的“indexof”中。

在定义或在构造函数中时尝试将dishIds变量初始化为空

dishIds: string[] = []

或

---

在

ngOnInit

设置this.dishIds=dishIds，如下所示

  ngOnInit(): void {
    this.dishService.getDishIds().subscribe(dishIds => this.dishIds = dishIds);
    this.route.params.pipe(switchMap((params: Params) => 
    this.dishService.getDish(params['id']))).
      subscribe(dish => {this.dish=dish; this.setPrevNext(dish.id)});
  }

---

虽然初始化dishIds将防止您遇到错误，但它无法解决以同步方式使用异步代码这一更深层次的问题

您将看到

ids

已正确填充，而

ids2

不是因为我添加了延迟

如果你使用你的代码

 this.dishService.getDishIds().subscribe(dishIds => this.dishIds);
    this.route.params.pipe(switchMap((params: Params) => this.dishService.getDish(params['id']))).
    subscribe(dish => {this.dish=dish; this.setPrevNext(dish.id)});

如果

getDishIds

返回速度足够快，我可能会工作。
我在示例中添加了一个延迟来模拟延迟，您可以在我的stackblitz中看到

ids2

在

this.route.params

订阅中为空

这是因为

这个.route.params

更快

您应该做的是将这两个流结合起来，以便在您确定您拥有所需的所有数据后尽快完成工作

我使用了

combineLatest

，它将在每个可观察对象发出一个值后立即调用。根据你的需要，你可能还需要别的东西

以下是您解决问题的方法

 combineLatest([this.dishService.getDishIds().subscribe(dishIds => this.dishIds),
    this.route.params.pipe(switchMap((params: Params) => this.dishService.getDish(params['id'])))]
    subscribe((value: [string[], dish: Dish]) => {
      //do your stuff
    });

另外：初始化您的

dishIds

像

dishIds:string[]=[]

额外加分；）您可以更改

setPrevNext

方法，使其将dishIds作为参数。

---

这样，您就不会在流中产生副作用。

这里是您应该做的，有关更多信息，请尝试在js中搜索rxjs、可观察和异步代码

  ngOnInit(): void {
    this.dishService.getDishIds().subscribe(dishIds => {
    this.dishIds = dishIds;
    // now you are sure that this.dishIds is defined.
    this.route.params.pipe(switchMap((params: Params) => 
    this.dishService.getDish(params['id']))).
    subscribe(dish => {
        this.dish=dish;
        this.setPrevNext(dish.id)});
    });
  }

---

setprevenxt（）

中的

this.dishIds

包含什么？是否在那里设置了值？首先，您应该初始化dishIds

dishIds:string[]=[]

这可能会删除错误。但我认为它本身解决不了问题。当

getDishIds

和路由参数完成时，是否应调用I asume

setPrevNext

？您当前的问题是，您的代码不能保证设置了dishid。它可能是，但也可能不是设置的。即使如此，dishIds是异步的，当您运行

setPrevNext

时，它可能是未定义的。此解决方案可能看起来有效，但实际上并不总是有效的，因为RxJS的异步性质将嵌套订阅视为反模式。您可以使用类似于

forkJoin

、

combinelatetest

或

mergeMap

等功能。

  ngOnInit(): void {
    this.dishService.getDishIds().subscribe(dishIds => {
    this.dishIds = dishIds;
    // now you are sure that this.dishIds is defined.
    this.route.params.pipe(switchMap((params: Params) => 
    this.dishService.getDish(params['id']))).
    subscribe(dish => {
        this.dish=dish;
        this.setPrevNext(dish.id)});
    });
  }