时间戳

首页 > 解决方案 > 订阅后未定义的对象角度

javascript - 订阅后未定义的对象角度

问题描述

我尝试从我的服务器获取数据。在我的订阅函数内部我有数据但是当我尝试在函数 console.log 之外使用它时返回 undefined

服务：

getPostDetail():Observable<Post> {
    return this.http.get<Post>(this.detailPostUrl);
}

零件：

export class PostDetailComponent implements OnInit {
    post: Post;

    constructor(private postsService:PostsService) {
        this.postsService.getPostDetail().subscribe(data => {
            this.post = data;
            console.log(this.post);
        });
    }

    ngOnInit(): void {
        console.log(this.post); // undefined
    }
}

我首先看到我得到一个undefinedfrom ngOnInit，console.log()但我不知道如何改变它。我可以补充一点，我有非常相似的功能并且可以工作。任何人都可以帮忙吗？

标签： javascriptangularobservableundefinedhttp-get

解决方案

正如上面的评论所表明的，http 调用是异步的，这意味着它们的结果需要一些时间才能从服务调用中返回。构造函数中的 getPostDetail() 订阅不会阻塞执行，并且会在任何数据返回之前调用 ngOnInit() 方法。这就是 this.post 未定义的原因。

相反，我会将 getPostDetail() 调用放在 ngOnInit 中，并将任何需要 this.Post 的逻辑放在订阅处理程序中，正如 Pierterjan 建议的那样。

如果您的 UI 期望绑定到 this.Post，那么您应该使用 elvis 运算符：

<div>{{Post?.postDate}}</div>

当 Post 为空或未定义时，这不会引发错误。在服务调用完成之前它不会显示。

推荐阅读