Question

我正在使用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>

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正在发布但检索未定义

1 个答案: