如何在Ionic 3中使用Observables

Question

Im trying to wait till the subscribe function finish before using the page load completly, but dont know what am doing wrong

I try this code:

home.ts

ionViewDidLoad() {
      this.data.getActiveCars().subscribe(
        notifications => {
              console.log(notifications); // this shows data
              this.notifications = notifications;
              this.ExpiredAssurance = this.notifications.success.ExpiredAssurance;
              this.ExpiredAutorisation = this.notifications.success.ExpiredAutorisation;
          }, error => {
              console.log(error);
          });
        console.log(this.ExpiredAssurance) // i get undefined here 
        console.log(this.ExpiredAutorisation) // i get undefined here 
  }

and in the provider I use this [data provider]:

getActiveCars():Observable <any>{
    let postData = {
      "user_id": 1,
      "_token": this.token,
      "brand": "getnotification"
  }
    return this.http.post(this.url + "/home",postData,this.httpOptions);
}

and in the home.html also nothing shows when i do this:

<ion-list>
    <ion-item>
      <ion-label>ExpiredAssurance</ion-label>
      <ion-badge>3</ion-badge>
    </ion-item>
    <ion-item>
      <ion-label>ExpiredAutorisation</ion-label>
      <ion-badge slot="end">{{ ExpiredAutorisation }}</ion-badge>
    </ion-item>
</ion-list>

Answer 1

A way to solve that issue it is to hide the result till the response comes.

<ion-badge *ngIf="ExpiredAssurance" slot="end">{{ ExpiredAssurance }}</ion-badge>

You can also show a loading icon in the meantime

<load-icon *ngIf="!ExpiredAssurance" />

This element load-icon does not exist but you can download another component to replace it

EDIT: Your issue is because of slot="end" property. If you want to use that property you would have to use it inside of the ion-item component:

<ion-item>
  <ion-badge slot="start">11</ion-badge>
  <ion-label>My Item</ion-label>
  <ion-badge slot="end">22</ion-badge>
</ion-item>

More info in Ionic documentation ion-badge

Answer 2

I end up finding a solution by adding a loading popup to wait for the subscribe function like this:

home.ts

let loader = this.loading.get('loading...');
      loader.present();

      this.data.getActiveCars().subscribe(
        notifications => {
              let data: SuccessObject = new SuccessObject(notifications);
              this.notifications = data.success.success;
              this.ExpiredAssurance = this.notifications.ExpiredAssurance;

              loader.dismiss();

            }, error => {
              console.log(error);
              loader.dismiss();

            });

the loading provider:

import {Injectable} from '@angular/core';
import {LoadingController} from 'ionic-angular';

@Injectable()
export class LoadingProvider {

    constructor(public loadingCtrl: LoadingController) {
        console.log('Hello LoadingProvider Provider');
    }

    public get(content: string = 'Please wait!') {
        return this.loadingCtrl.create({
            content: content
        })
    }
}

more information about Loading in ionic v3 here