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

Question

我想从 api 检索数据并将其分配给角度组件内的某个值。 在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]);   
  }

控制台输出

Answer 1

您在调用navigateToProfile时使用了名称不正确的属性。

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

{
  id: 35,
  // ..
}

但是您正在像这样调用函数：

this.navigateToProfile(this.loggedUser.Id);

相反，使用属性id （小写）

this.navigateToProfile(this.loggedUser.id);

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