Question

在我的Ionic 2应用程序中，我有一个GET组件来获取数据。我想制造装载机并在数据准备好后解雇它。我试图查看堆栈溢出周围的其他帖子，但我的问题是不同的。我做了一些事情，但装载机是永远的，它不会帮助我。

如下所示：

import { Component,ViewChild } from '@angular/core';

import { NavController,LoadingController,AlertController,ViewController} from 'ionic-angular';
import { Facebook } from 'ionic-native';

//import pages
import {LoginPage} from "../../pages/login/login";
import {User} from '../../models/user'
import { Storage} from '@ionic/storage';
//import provider
import { ProfileData } from '../../providers/profile-data';
import { NotesData } from '../../providers/notes-data';

import firebase from 'firebase'
import {AddNote} from "../add-note/add-note";

/*
Generated class for the NotesList page.

See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({
selector: 'page-notes-list',
templateUrl: 'notes-list.html'
})
export class NotesList {

//facebook user
userProfile: any = null;
uid: any = null;
fireUid:any=null;
name:string=null;
photo: any =null;
user:User=null;
photos:any=null;
currentUser:any=null;
photonew:any=null;
//notes list

notes:any=null;
data:any;
pages: Array<{title: string, component: any}>;

constructor(public navCtrl: NavController,public profileData:ProfileData,private viewCtrl: ViewController,public notesData:NotesData,private loadingCtrl: LoadingController,private alertCtrl: AlertController,public storage:Storage) {
this.data={};
this.data.title="";
this.data.desc="";

}

ionViewDidLoad() {

//如果我这样做，装载机是永远的 / * let loader = this.loadingCtrl.create（{ dismissOnPageChange：是的， }）;

loader.present();

* / //这里我想要加载器直到数据准备就绪。 this.getNotesList（）; //这个函数不返回数据所以我不能这样做.getNotesList（）。then（（）=＆gt;

}

getNotesList(){
console.log("get event");
var that=this;
this.notesData.getNotesLIst().on('value', snapshot => {
let notesList= [];
snapshot.forEach( snap => {
console.log("id note"+snap.val().id);
notesList.push({
id: snap.val().id,
title: snap.val().title,
desc: snap.val().desc,
color:snap.val().color,
photo:snap.val().photo,
});
});
that.notes = notesList;

});
}
addNote(){
this.navCtrl.push(AddNote);
}

logOutFacebook(){
Facebook.logout().then((response)=>
{
this.navCtrl.push(LoginPage);
alert(JSON.stringify(response));
},(error)=>{
alert(error);
})
}

}

Answer 1

首先，您应该展示如何实现加载页面。它是带有cordorva的闪屏吗？或者就像div显示一些图像？如果它是一个闪屏，您可以在获取数据后在组件中添加此代码（它来自入门模板，您可以通过使用ionic start创建新项目来查看详细信息）：

this.platform.ready().then(() => {
  // Okay, so the platform is ready and our plugins are available.
  // Here you can do any higher level native things you might need.
  StatusBar.styleDefault();
  Splashscreen.hide();
});

而且，如果你在索引页面中使用div，它就是类似的，你可以使用纯js来获取该元素并将其删除。

Answer 2

好吧它成功了这是我的答案

    ionViewDidLoad() {

    let loader = this.loadingCtrl.create({});
    loader.present();
    this.getNotesList().then((x) => {
      if (x) loader.dismiss();
    });




  }

  getNotesList(){
    return new Promise(resolve => {
      var that=this;
      this.notesData.getNotesLIst().on('value', snapshot => {
        let notesList= [];
        snapshot.forEach( snap => {
          console.log("id note"+snap.val().id);
          notesList.push({
            id: snap.val().id,
            title: snap.val().title,
            desc: snap.val().desc,
            color:snap.val().color,
            photo:snap.val().photo,
          });
        });
        that.notes = notesList;
        resolve(true);
      });
    })
  }

离子2：数据准备好后如何解除加载器？

2 个答案: