如何在 DOM 上显示加载器/GIF/文本，直到在 Ionic 2 中未获取来自 JSON API 的数据

Question

我想在从我的JSON API加载数据之前在屏幕上显示加载器或GIF或文本。请参阅下面的代码，以最简单的方式listproducts.ts使用listproduct.service.ts获取数据

以下是我的listproduct.service.ts代码

import { Injectable } from '@angular/core';
import { Headers, Http, HttpModule ,Response } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class ListproductService{
    private _url:string = "http://funiks.com/qbook/api/productmasterjson.php";
    constructor(private _http : Http){}
    listProduct(){
        var headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');
        return this._http.post(this._url,{headers:headers})
               .map((response:Response) => response.json());
    }
}

和listproduct.ts

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ListproductService } from './listproduct.service';
import { DeleteProductService } from './deleteProduct.service';
import { ProductservicemasterPage } from '../productservicemaster/productservicemaster';
import { Subscription } from 'rxjs';

@IonicPage()
@Component({
  selector: 'page-listproduct',
  templateUrl: 'listproduct.html',
  providers : [ ListproductService,DeleteProductService ],
})
export class ListproductPage implements OnInit{
  public list = [];
  constructor(private _listProduct : ListproductService,private _deleteProduct : DeleteProductService,
              public navCtrl: NavController,public navParams: NavParams) {}
  ngOnInit() {
     this._listProduct.listProduct().subscribe(data => {
       this.list = data;
      console.log(data[0].NAME);
      });
  }
}

我怎样才能做到这一点？

Answer 1

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
import { ListproductService } from './listproduct.service';
import { DeleteProductService } from './deleteProduct.service';
import { ProductservicemasterPage } from '../productservicemaster/productservicemaster';
import { Subscription } from 'rxjs';

@IonicPage()
@Component({
  selector: 'page-listproduct',
  templateUrl: 'listproduct.html',
  providers : [ ListproductService,DeleteProductService ],
})
export class ListproductPage implements OnInit{
  public list = [];
  loading:any;
  constructor(private _listProduct : ListproductService,private _deleteProduct : DeleteProductService,
              public navCtrl: NavController,public navParams: NavParams, public loadingCtrl: LoadingController) {
   this.loading = this.loadingCtrl.create({
    content: 'Please wait...'
  });
    }
  ngOnInit() {
     this.loading.present();
     this._listProduct.listProduct().subscribe(data => {
       this.list = data;
      console.log(data[0].NAME);
      this.loading.dismiss();
      });
  }
}

Answer 2

如果我理解你的问题，你可以有一个加载微调器，其中将显示数据，将您的代码包装在 try/catch/finally 块中，并用微调器替换数据，直到获取数据。

此外，微调器

具有布尔值，并将微调器替换为数据。

showSpinner: boolean = true;

.HTML

<div class="data-wrapper">
   <div *ngIf="list">
      <div *ngFor="let item of list">
         {{ item.NAME }}
      </dvi>
   </div>
   <div *ngIf="showSpinner">
      <app-spinner></app-spinner> <!-- your spinner goes here -->
   </div>
</div>

打字稿

try {
  this.http.get<T>(this.apiUrl).subscribe(data=> {
    this.list = data;
  });
}
catch (e) {
  console.log(e);
}
finally {
  this.showSpinner = false; //You now have the response, so hide the spinner.
}