Disable ion-refresher in ionic 3


#1

This is my code. I want to disable refresher when app is loaded first time after installed. I don’t know how to use ng-if property with in ion-refresher. Please help me

.html file

<ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content 
      ng-if="refresherEnabled"
      pullingIcon="arrow-dropdown" 
      pullingText="Pull to refresh" 
      refreshingSpinner="none">
    </ion-refresher-content>
</ion-refresher>

<ion-grid *ngFor="let item of globalArray; let i = index" no-padding>
    <div *ngIf="item.name == 'loading'">
      <p class="nothingToDisplay">Please restat the app.</p>
    </div>

    <div *ngIf="item.name == 'null'">
      <p class="nothingToDisplay">There are no three wheels nearby. Please try again in few minutes.</p>
    </div>
</ion-grid>

.ts file

public refresherEnabled: any;

ionViewDidLoad() {
	console.log('ionViewDidLoad HomePage');
	this.splashScreen.hide();
	this.storage.get('isLoaded').then((val) => {
		if (val == "loaded") {
			this.getDriverList();
			this.refresherEnabled = true;
			console.log("loaded");
		}
		else {
			this.storage.set('isLoaded', "loaded");
			this.globalArray.push({ name: "loading" });
			this.refresherEnabled = false;
			console.log("not loaded");
		}
	});
}

#2

The *ngIf has to be in a tag that contains the refresher in the html. And it can’t be ng-if, it should be *ngIf.

You could also try to use the refresher api to enable /disable it in code I think.

PS: You have a typo: please resta**r**t the app. And I have the feeling that you did something wrong if the user has to restart the app while the first opening.
Why has the user to restart the app? I estimate min. 23% of the smartphone uses don’t even know how to close an app. (old people like grad parents)


#3

Yes there is a error. But I cant find it. This is y code.

ionViewDidLoad() {
  console.log('ionViewDidLoad HomePage');
  this.splashScreen.hide();
  this.getDriverList();
}

getDriverList() {
  this.geolocation.getCurrentPosition({ enableHighAccuracy: true }).then((position) => {
    this.longitude = position['coords']['longitude'];
    this.latitude = position['coords']['latitude'];
    this.http.get(this.host + '/mywheel_getDriverDistance.php?longitude=' + this.longitude + '&latitude=' + this.latitude).subscribe(location => {
      console.log(location);
    });
  });
}

I debug the code. It works until the line, this.latitude = position['coords']['latitude'];
But it don’t call the http request. But after restart the app it works fine.


#4

When using *ngIf it says that it is not a known property. However I fixed the problem using enabled property to ion-refresher

<ion-refresher (ionRefresh)="doRefresh($event)" [enabled]="refresherEnabled">
    <ion-refresher-content
      pullingIcon="arrow-dropdown" 
      pullingText="Pull to refresh" 
      refreshingSpinner="none">
    </ion-refresher-content>
</ion-refresher>

Can you help me to solve the problem which is mentioned in the above reply. Thank you


#5

Can you check the network activity of the app? when you open the developer tools in Chrome or Firefox there is a tab for the network activity.
And is the Url correctly put together? try logging the same thing that you use as url.


#6

URL is set correctly. Only problem is, network isn’t called at the very first time. After restarting app it is called well. That is what I can’t understand.


#7

Are you certain the platform is ready when you try to interact with it?


#8

yes platform is ready. I check with platform.ready().then(()=>{}); also. It gives console.log() output that working well. But not called to http request.


#9

already tried with the plain old XML /ajax request?