Question

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

服务：

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
    }
}

我看到首先我从undefined的{{1}}得到了ngOnInit，但是我不知道如何更改它。我可以补充一点，就是我的功能非常相似，并且可以正常工作。有人可以帮忙吗？

Answer 1

如上面的注释所示，http调用是异步的，这意味着它们的结果需要一段时间才能从服务调用中返回。构造函数中的getPostDetail（）订阅不会阻止执行，并且ngOnInit（）方法将在返回任何数据之前被调用。这就是为什么this.post未定义的原因。

相反，我会把对getPostDetail（）的调用放在ngOnInit中，并将所有需要此操作的逻辑放入。如Pierterjan所建议的那样，放在订阅处理程序中。

如果您的UI希望绑定到this.Post，则应使用elvis运算符：

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

当Post为null或未定义时，这不会引发错误。直到服务呼叫完成才显示。

订阅后未定义的对象角度

1 个答案: