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

【问题标题】：Angular Http subscribe - cannot assign to variable in componentAngular Http订阅 - 无法分配给组件中的变量
【发布时间】：2023-04-07 04:27:02
【问题描述】：

我想从 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]);   
  }

console output

【问题讨论】：

您从console.log(data) 看到了什么？您可以将输出添加到问题中吗
我添加了一个指向控制台输出的链接 - 这两个 console.logs 返回相同的对象

标签： javascript angular typescript http subscribe

【解决方案1】：

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

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

{
  id: 35,
  // ..
}

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

this.navigateToProfile(this.loggedUser.Id);

改为使用属性id（小写）

this.navigateToProfile(this.loggedUser.id);

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

【讨论】：

但loggedUser是一个用户类型的对象，它有一个名为“Id”的字段，当我更改为“id”时，它不知道它是什么属性。也许后端有问题？
您确定您的映射与您的用户类型正确吗？您可以发布 console.log(this.loggedUser) 吗？
但这是 Javascript。您的浏览器中没有 Typescript。 Typescript 只允许您对设计时期望发生的事情进行建模。
您的 Typescript 模型应该反映 Javascript 对象本身。如果您希望您的对象具有与 HTTP 响应不同的名称，请将它们映射到您的服务中。
如果没有，那么您需要更改您的 Typescript 模型以匹配 HTTP 响应