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

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

2 个答案: