Angular Http 订阅 - 无法分配给组件中的变量

Question

我想从 api 中检索数据并将其分配给 angular 组件中的某个值。在 subscribe 中，我试图将数据分配给 loggedUser，然后调用此订阅内的函数以使用此接收到的对象导航到另一个组件。不幸的是，我收到错误消息：请求的路径在索引 1 处包含未定义的段。我也想在订阅之外设置这个对象。我怎样才能做到这一点？

 logIn() {
      this.portfolioAppService.logIn(this.loggingUser).subscribe((data) => {
      this.loggedUser = data;
      console.log(this.loggedUser);
      console.log(data);
      this.navigateToProfile(this.loggedUser.Id);
    });
  }

  navigateToProfile(id: number) {
    this.router.navigate(['/profile', id]);   
  }

console output

Answer 1

您在调用 navigateToProfile 时使用了错误命名的属性。

从您的控制台输出，我可以看到订阅中的 data 对象如下所示：

{
  id: 35,
  // ..
}

但是你是这样调用函数的：

this.navigateToProfile(this.loggedUser.Id);

而是使用属性 id（小写）

this.navigateToProfile(this.loggedUser.id);

为了将来缩小此问题的范围，请尝试在测试中更加具体。人类善于看到他们想看到的东西，并且会假设问题比实际情况更复杂。如果您尝试过 console.log(this.loggedUser.Id)，您会看到结果 undefined，并自己解决问题。

Angular Http 订阅 - 无法分配给组件中的变量

Angular Http subscribe - cannot assign to variable in component

javascript

http

subscribe

typescript

angular