Angular，Contentful 正在发布但检索未定义

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