承诺在构建页面时中断

Question

我使用promise和http.get从Wordpress从JSON API获取数据

获取数据后，我将在页面上显示数据..

但错误显示是因为构建页面时数据不可用

如何解决该错误？

这是我的服务代码

loadPost(id) {
    return new Promise(resolve => {
        this.http.get('http://blog.macg.xyz/api/get_post/?id='+id)
            .map(res => res.json())
            .subscribe(post => {
                this.post = post;
                resolve(this.post);
                console.log(this.post);
            });
        });
    }

这是控制器

export class PostPage {
    public id:any;
    public post: any;
    public loading : any;

  constructor(public postService: PostService, public navCtrl: NavController,  params: NavParams, public loadCtrl: LoadingController) {
    this.id = params.get("id");
    // this.onPageWillEnter();
  }

  onPageWillEnter() {
    // Starts the process 
    this.showLoading();
  }

  showLoading() {
    this.loading = this.loadCtrl.create({
      content: "Please wait..."
    });
    // Show the loading page
    this.loading.present();
    // Get the Async information 
    this.loadPost();
  }

  loadPost(){
      this.postService.loadPost(this.id) // here where I call the service
      .then(data => {
        this.post = data;
        console.log(this.post);
        this.hideLoading();
      });
    }

    hideLoading(){
    // Hide the loading component
    this.loading.dismiss();
  }
}

这里是html代码

<ion-header>
  <ion-navbar>
    <ion-title>{{id}}</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
    {{post.post.content}}
</ion-content>

这是错误

Answer 1

由于从模板文件中抛出错误，因此post.post.content可能会抛出错误。如果您的帖子为空（首次运行时为true），尝试访问其post变量可能会抛出该错误。

您可以控制帖子是否为空，例如

<ion-content padding ng-if="post">
     {{post.post.content}}
</ion-content>

Answer 2

您可以使用 elvis运算符 ？来避免在post属性为空时抛出该错误

<ion-header>
  <ion-navbar>
    <ion-title>{{id}}</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
    {{post?.post.content}}
</ion-content>