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

Question

我有一项服务，可以根据存储在localStorage中的令牌向我返回用户数据，并且一切正确返回，直到到达组件为止。

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

显然，至少一切对我来说都应该解决。但是，在控制台中可能会注意到，即使在将返回值分配给我的用户属性后，它也会打印为未定义。如下图所示。

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

但是它什么也没做，我不知道为什么会这样。任何帮助都将受到欢迎！

Answer 1

User $代表流，应以这种方式分配：

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

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

}

和模板添加|async管道。

Answer 2

this.user在您调用subscribe()之后不立即可用，很有可能getUser()在调用console.log(this.user)时没有发出任何结果。 / p>

如果您只想查看this.user中的内容，则可以在subscribe()的回调中尝试使用它

this.clientHeaderService.getUser().subscribe((response) => {
  this.user = response;
  console.log(this.user); // this.user should be available here
})

在模板方面，您应该只能通过{{ user }}访问用户。

我还建议您在https://stackblitz.com/上使用共享您的最低可复制代码，以更轻松地获得帮助。

Answer 3

订阅几乎像JavaScript中的promise一样工作，并且具有回调

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

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

console.log(this.user)

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

代替   尝试

.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);

})