角度，内容正在获取帖子，但检索未定义

Question

我正在使用Angular 5和Contentful API。我相信我有一个相当奇怪的问题。

我正在创建一个博客文章应用程序，我有一个post.component和一个post-detail.component。我可以获取帖子列表并在我的模板中显示它们。

我通过服务将数据传递给细节，我可以显示整个帖子。我已经将路由器设置为转到base/detail/：id并且它正在工作。

我希望能够向某人发送 url，他们会看到详细的帖子，但该服务在该组件开始时无法提供数据。在我的 OnInit 中，我制作了一个 If-Else，我看到控制台中正确打印了 postId，但在记录对象时，我未定义。这是一个异步问题还是？

Post-detail.component.ts：

if (this.dataService.serviceData == null) {
this.route.params.subscribe(params => {
this.postId = params['id'];
});
console.log('post id: ' + this.postId);
this.getContent(this.postId).then(data => this.post = data);
console.log(this.post);
}
else {
this.post = this.dataService.serviceData;
}

我在另一个组件中做了完全相同的事情，它就像一个魅力，只是我没有把它打包在 If-Else 中。然而，这两个对象的大小不同，一个包含图像，另一个工作不 - 列表也包含图像，但这里没有问题。

当在另一个组件中请求两个 id 时，我可以在我的模板中使用它。

<div *ngIf="post">
<mat-card >
<mat-card-header>
<mat-card-title> 
<h1>{{ post.fields.headline }} </h1>
</mat-card-title>
</mat-card-header> 
<img style="max-width:100%" *ngFor="let img of post.fields.media" src="{{ img.fields.file.url }}" />
<mat-card-content> 
<span [innerHTML]="post.fields.content | mdToHtml"> </span>
</mat-card-content>
<mat-card-footer>
<time>
Opdateret: {{ post.sys.updatedAt | date: 'shortDate'}}
</time>
</mat-card-footer>
</mat-card> 
</div> 

Answer 1

您已经正确猜到了这是一个异步问题。您需要在设置它的同一范围内使用postId(this.Post也是如此)，如下所示：

if (this.dataService.serviceData == null) {
this.route.params.subscribe(params => {
this.postId = params['id'];
console.log('post id: ' + this.postId);
this.getContent(this.postId).then(data => 
{
this.post = data;
console.log(this.post);
});
});  
}
else {
this.post = this.dataService.serviceData;
}