我正在使用Angular 5和Contentful API。我相信我有一个相当奇怪的问题。
我正在创建一个博客帖子应用,我有一个post.component和一个post-detail.component。我可以获得一个帖子列表并在我的模板中显示它们。
我通过服务将数据传递给细节,我可以显示整个帖子。我已经设置了路由器去base / detail /:id并且它正在工作。
我希望能够向某人发送网址并且他们会看到详细的帖子,但是该服务在启动该组件时无法提供数据。在我的OnInit中我做了一个If-Else,我看到postId正确地打印在控制台中,但是在记录对象时我得到了未定义。这是异步问题还是?
后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>
答案 0 :(得分:0)
你已经正确地猜到了它的异步问题。您需要在设置它的同一范围内使用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;
}