javascript - 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，并自行解决问题。