javascript - Löften bryts medan sidor byggs

Jag använder promise och http.get för att hämta data från JSON API från Wordpress

Efter att ha hämtat data kommer jag att visa datan på en sida.

Men felet visas eftersom datan inte är tillgänglig när sidan byggs

Hur löser man det felet?

Här är min servicekod

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

Och här är kontrollenheten

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

Här är HTML-koden

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

Och här är felet

Svar #1

Eftersom felet kastas från din mallfil, kanske post.post.content orsakar felet. Om ditt inlägg är null (vilket är sant vid första körningen), kan försök att nå dess postvariabel orsaka det felet.

Du kan kontrollera om inlägget är null eller inte, till exempel

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

Svar #2

Du kan använda elvis-operatorn ? för att undvika att det felet kastas när post-egenskapen fortfarande är null

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