why Activity Indicator not hiding in nativescript?

Question

I have used Activity Indicator in my page but it is not hiding when i set it to false in any promise but when i set false outside promise it is hiding

//My ts file
 public loadLanguages() {
   this.isLoading= true; //where i am setting value true for activity indicator
    for (var i = 0; i < 1; i++) {
        this.ArrayLangauge.push("Select Langauge");
    }
    this.registerService.language()
        .then(a => {
            if (a) {
                for (var i = 0; i < a[0].languages.length; i++) {

                }
            } this.isLoading=false; ////where i am setting value false for activity indicator
        });
}


//my Html
  <AbsoluteLayout height="100%" width="100%">
    <ActivityIndicator class="indicator" [busy]="isLoading"  [visibility]=" isLoading ? 'visible' : 'collapse'" row="1" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>    
</AbsoluteLayout>

shouldnt `this.isLoading = false` be inside the `.then()` statement? — mast3rd3mon, May 08 '17 at 08:08
yes this.isLoading = false should be inside .then() statement bcz i am setting it false after receiving data from webservices — Shivaraj Rajagolkar, May 08 '17 at 08:14
@mast3rd3mon`this.isLoading = false` is already inside `.then()` statement. It's an arrow function which can also be written like this : `.then(function(a) { this.isLoading=false; })` — Stephane Janicaud, May 08 '17 at 08:19
@ShivarajRajagolkar are you sure you enter promise success and not promise error ? — Stephane Janicaud, May 08 '17 at 08:21
just realised there was another set of brackets. also, why not subscribe instead? — mast3rd3mon, May 08 '17 at 08:22
@mast3rd3mon i am using nativescript angular2 so i used fat arrow method — Shivaraj Rajagolkar, May 08 '17 at 09:04
@stej4n yes i am using it my application is running like horse but only thing i m not able to hide activity indicator ...i have used in all activities its wokring inside promise but here not working — Shivaraj Rajagolkar, May 08 '17 at 09:06
Then it must be a problem of scope with `this`. You must have a `this.isLoading` in your global scope. Checkout this Q : http://stackoverflow.com/questions/38589227/why-this-is-undefined-inside-a-fat-arrow-function-definition — Stephane Janicaud, May 08 '17 at 09:14
@stej4n i am already working with scopr of this. and it is working in another pages but it is not working on this page only — Shivaraj Rajagolkar, May 08 '17 at 09:23
Then you should add a complete snippet so we can help find out what's wrong — Stephane Janicaud, May 08 '17 at 09:24
Try to use `this.isDummy` instead of `this.isLoading` to ensure it's not a scope problem — Stephane Janicaud, May 08 '17 at 09:32
i also use nativescript with angular 2, subscribing would be your best way — mast3rd3mon, May 08 '17 at 10:10
the `fat arrow method` is a promise, and you can use them with more options for debugging with a `subscribe()` instead of a `then()` — mast3rd3mon, May 08 '17 at 10:51
Can you add the code of this method language() on the registerService? — GUISSOUMA Issam, May 08 '17 at 11:05
@GUISSOUMA Issam language(): any { var myurl = this.apiCalls.BASE_URL + "languages"; return request({ url: myurl, method: "GET", headers: { "Accept": "application/vnd.fmate.v1+json" } }).then(response => { return response.content.toJSON(); }).then(res => { console.log("langauge") var jsonObjectBody = JSON.stringify(res); let a = []; a.push(res.response); return a; }) } — Shivaraj Rajagolkar, May 10 '17 at 12:47

score 0 · Answer 1 · answered May 11 '17 at 07:17

Use Http service and return Observable:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import "rxjs/Rx";
import { RequestOptions, Headers } from '@angular/http';

@Injectable()
export class RegistrationService {

    constructor(private http:Http, private apiCalls:ApiCalls) {
    }

    language():Observable<any> {
        var myurl = this.apiCalls.BASE_URL + "languages";
        return this.http.get(`${myurl}`)
            .map(this.extractData)
            .catch(this.handleError);
    }

    private extractData(res:Response) {
        let body = res.json();
        return body;
    }

    private handleError(error:Response | any) {
        // In a real world app, we might use a remote logging infrastructure
        console.log(JSON.stringify(error.json()));
        return Observable.throw(error);
    }

}

On your component you can do like below:

this.isLoading = true;
this.registrationService.language(this.user)
            .subscribe((data) => {
                    console.log("success =>" + JSON.stringify(data));
//handle data as you like here
                    this.isLoading = false;


                },
                (error:any) => {
                    console.log("error =>" + JSON.stringify(error));
                    console.log(error.status);

                        this.isLoading = false;


                }
            )

On your html template:

<ActivityIndicator [busy]="isLoading" horizontalAlignment="center" verticalAlignment="center" [visibility]="isLoading? 'visible':'collapse'"></ActivityIndicator>

Add a label showing the value of isLoading for debug purpose make sure isLoading turn to false — GUISSOUMA Issam, May 11 '17 at 10:18

why Activity Indicator not hiding in nativescript?

1 Answers1