Data not fetching on first click showin undefine

I’m try to fectch value from database using provider but on first click showing blank but on second click work properly and fetch data from database.but i want to get the data on first click.
Below my myproviders.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from "@angular/http";
import 'rxjs/add/operator/map';
@Injectable()
export class FieldstaffdataProvider {
staffname: any;
  constructor(public http: Http, public toastService: ToastProvider) {
   this.http.get("mydoman.com/admin/index.php/StaffIfeldWorkAssign")
      .subscribe(data => {
        let  dataTemp=data.json()
        let response = dataTemp.code;
        this.staffname=dataTemp.viewstaffdetails;
      }, error => {
        // Error getting the data
        console.log(error);
      });
}
loadAll(){
    return Promise.resolve(this.staffname);
  };
  }

Above provider i called into the page-add-expenses-fooding.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FieldstaffdataProvider } from '../../providers/fieldstaffdata/fieldstaffdata';


@IonicPage()
@Component({
  selector: 'page-add-expenses-fooding',
  templateUrl: 'add-expenses-fooding.html',
})
export class AddExpensesFoodingPage {
 names: any;
  constructor(public navCtrl: NavController, public navParams: NavParams,public data:FieldstaffdataProvider) {

  }

  ionViewDidLoad() {
   this.data.loadAll().then(result => {
      this.names = result;
    });
  }

}

below my html

<ion-item>
  <ion-label color="custom" floating>Select field Staff</ion-label>
  <ion-select [(ngModel)]="buyer" #FieldStaff (ionChange)="getstaffname(FieldStaff.value)">
       <ion-option *ngFor="let name of names" [value] = "name.users_id">{{name.name}}</ion-option>
    </ion-select>
</ion-item>

how can i fix .Please help me anyone
Thanks.