Angular，Contentful 正在获取 post 但检索未定义

Question

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

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

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

我希望能够向某人发送 url，他们会看到详细的 post，但是在该组件启动时服务无法传送数据。在我的 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;
}

Angular，Contentful 正在获取 post 但检索未定义

Angular, Contentful are getting post but retrieve undefined

promise

typescript

contentful

angular5