Javascript 将上载的API数据加载到模板时出错

我有一个服务，它根据本地存储中存储的令牌返回用户数据，并且在我访问我的组件之前，所有内容都会正确返回

真正的问题是，我的component.ts文件中有以下代码：

显然，至少一切都会对我有利。但是，在控制台中，可以注意到，即使在我将return分配给我的用户属性之后，它仍被打印为未定义。如下图所示。

当尝试在HTML模板中使用时，我收到消息说无法从user属性加载数据。我已经尝试过像这样使用异步管道：（user$| async）作为用户。我试着使用这样的安全导航：user？.email

---

但它什么也没做，我也不知道为什么会这样。欢迎任何帮助

this.user

在您调用

subscribe（）

后不能立即使用，很可能在调用

console.log（this.user）

时，

getUser（）

没有发出任何结果

如果您只想查看此.user中的内容，您可以在

subscribe（）

在模板方面，您应该能够通过

{{user}}

访问用户

---

我还建议使用共享您的最小可复制代码，以便更轻松地获得帮助。

订阅几乎像javascript中的promise一样工作，并且它有一个回调

.subscribe(response=>this.user=response)

回调被推送到当前事件循环的末尾。因此您正在访问

console.log(this.user)

在您的订阅中执行回调之前

反而 试一试

---

用户$表示流，应按以下方式分配：

export class {
    // a stream type
    user$: Obserable<User>;

    ngOnInit() {
        // a stream type
        this.user$ = this.clienteHeaderService.getUser();
    }

}

导出类{
//溪流类型
用户$：不可观测；
恩戈尼尼特（）{
//溪流类型
this.user$=this.clienteHeaderService.getUser（）；
}
}

---

模板添加

|async

管道。

请为clientHeaderService和HTML添加代码。在任何情况下，您的console.log（）都是在subscribe方法之外完成的，因此它不会工作。添加这个.clientHeaderService.getUser（）.subscribe（response=>{this.user=response；console.log（this.user）；}）。此外，异步管道将用于可观察对象，您的用户变量不是可观察对象。我只是登录控制台以便能够预先预览数据，因为目的是在HTML模板中实际显示它们。问题是，在模板中，无论我使用什么形式，它总是会从用户加载任何内容时出错。

this.user

在

getUser（）

实际发出任何结果之前不会有任何值，这就是它未定义的原因。您也应该显示您的HTML模板，或者只使用stackblitz

.subscribe((response) => {
  this.user=response;
  //you can access value of this.user here or call other function here to 
  //access this.user
  console.log(this.user);

})

export class {
    // a stream type
    user$: Obserable<User>;

    ngOnInit() {
        // a stream type
        this.user$ = this.clienteHeaderService.getUser();
    }

}