Angular 4 loading.dismiss() 不工作

Question

我正在尝试在 handleError() 方法中执行 loading.dismiss() ，但不确定该怎么做？它运行良好，响应良好，不确定如何处理错误情况

请帮忙

@Injectable()

导出类 SharedProvider {

 private _postsURL = "https://jsonplaceholder.typicode.com/posts";

 constructor(private http: Http, public loadingCtrl: LoadingController) {
 }



 getPosts(): Observable<IPosts[]> {

    let loading = this.loadingCtrl.create({
        content: 'loading...'
      });
      loading.present();
     return this.http
         .get(this._postsURL)
         .map((response: Response) => {
            loading.dismiss();
            console.log("Result printed!!");
             return <IPosts[]>response.json();

         })
         .catch(this.handleError);


 }

  handleError(error: Response) {
      this.loading.dismiss();
     console.log("Err printed!!" + error.statusText);
     return Observable.throw(error.statusText);
 }

Answer 1

loading 对象在您的 handleError 方法中不存在，因为它的作用域是 getPosts()，因此您无法访问它，如果 loading 是全局设置的或您的类的属性，则有可能。我认为有几个解决方案可以解决这个问题:

首先是取消加载，然后调用 handleError:

// your getPosts method ...
.catch(err =>{
  loading.dismiss();
  this.handleError(err);
});

第二个(如前所述)是创建属性 loading 并使用它来代替作用域加载对象。

 private _postsURL = "https://jsonplaceholder.typicode.com/posts";
 public loading;
 constructor(private http: Http, public loadingCtrl: LoadingController) {
 }

 getPosts(): Observable<IPosts[]> {
   this.loading = this.loadingCtrl.create({ content: 'loading...' });
   this.loading.present().then(() =>{
     return this.http
         .get(this._postsURL)
         .map((response: Response) => {
            this.loading.dismiss();
            console.log("Result printed!!");
             return <IPosts[]>response.json();

         })
         .catch(this.handleError);
   });
 }

也尝试将你的方法内容包装在加载present()方法返回的promise中，方法dismiss()被触发时有很多并发错误在向用户显示加载(或任何其他可呈现的组件)之前。

无论如何，其中一种解决方案可能对您有用，希望对您有所帮助。