如何在 ionic 3 中使用 Observables

Question

我试图等到订阅功能完成后再完全使用页面加载，但不知道做错了什么

我试试这个代码：

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 
  }

在提供者中我使用这个[数据提供者]：

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

当我这样做时，在 home.html 中也没有任何显示：

<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

我最终通过添加加载弹出窗口来等待订阅功能找到解决方案，如下所示：

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

            });

加载提供者：

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

有关在 ionic v3 中加载的更多信息here

Answer 2

解决该问题的一种方法是在响应到来之前隐藏结果。

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

同时你也可以显示加载图标

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

这个元素load-icon不存在，但是你可以下载另一个组件来替换它

编辑： 您的问题是因为 slot="end" 属性。如果要使用该属性，则必须在 ion-item 组件中使用它：

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

更多信息Ionic documentation ion-badge