2017-07-21 2 views
0

Ich habe ein Problem eine Variable erstellt in ionViewDidLoad in einem ts innerhalb meiner app zugreifen.Zugang Variable in ionViewDidLoad (Ionic 3)

import { Component } from '@angular/core'; 
 
import { NavController } from 'ionic-angular'; 
 
import { Http } from '@angular/http'; 
 
import { CarreerDataProvider } from '../../providers/carreer-data/carreer-data'; 
 

 
@Component({ 
 
    selector: 'page-home', 
 
    templateUrl: 'home.html' 
 
}) 
 
export class HomePage { 
 
    clientName = "hola"; 
 
    carrera={ 
 
     kind: 'key' 
 
    } 
 
    modeKeys = [ 
 
     {'key':"pablo","precio":"500","precio2":"500"}, 
 
     {'key':"juan","precio":"500","precio2":"500"}, 
 
     {'key':"lili","precio":"500","precio2":"500"}, 
 
     {'key':"juan","precio":"500","precio2":"500"}, 
 
     {'key':"juan","precio":"500","precio2":"500"}, 
 
    ] 
 

 
    constructor(public navCtrl: NavController,public carreerService: CarreerDataProvider, public http: Http) { 
 
     console.log("constructorLoading"); 
 
    } 
 

 
    ionViewDidLoad(){ 
 
     var jlink = 'http://nimbler.app-senescyt.sachiel.xyz/universidad-rest'; 
 
     var getItem = function(ids) { 
 
      console.log('hola'); 
 
      console.log(ids); 
 
      return ids; 
 
     }; 
 
     //Auto Json 
 
     var getJSON = function(url, callback) { 
 
      var xhr = new XMLHttpRequest(); 
 
      xhr.open("get", url, true); 
 
      xhr.responseType = "json"; 
 
      xhr.onload = function() { 
 
       var status = xhr.status; 
 
       if (status == 200) { 
 
        callback(null, xhr.response); 
 
       } 
 
       else { 
 
        callback(status); 
 
       } 
 
      }; 
 
      xhr.send(); 
 
     }; 
 
     //start Json 
 
     getJSON(jlink, function(err, data) { 
 
      if (err != null) { 
 
       console.log('No wiki data code found'); 
 
      } 
 
      else { 
 
       var i =0; 
 
       var total = Object.keys(data).length; 
 
       var ids = []; 
 
       for(i; i < total; i++) { 
 
        if (ids.indexOf(data[i].field_provincia) == -1) { 
 
         ids.push(data[i].field_provincia); 
 
        } 
 
       } 
 
       // Start axctionable code. 
 
       getItem(ids); 
 
       // End actionable code. 
 
      } 
 
     }); 
 
    } 
 

 
    ionViewDidEnter(){ 
 
     console.log("IonViewEnter"); 
 
    } 
 
}

Die Variablen carrera und modeKeys sind localy eine ion-select im HTML-bevölkern verwendet. Was ich tun möchte, ist das Array verwendet ids in ionViewDidLoad aus einem Webservice erstellt diese ion-select zu füllen, wie ich mit modeKeys tun. Ich habe viele Methoden ohne Erfolg ausprobiert.

Hoffe, dass Sie mich mit meinem Problem helfen kann. Sehr geschätzt.

Antwort

0

können Sie verwenden http.get (fileonOSsystem) und laden Sie Ihre Dateien direkt aus json Laufwerk für Bildschirmlayouts spöttisch. Siehe here. Genau dasselbe Prinzip in Angular und Ionic. Beispiel erstellt Ordner/Daten aus dem Projektstamm. Gleiches gilt für Ionic. ionic g provider Data - erstellt einen Serviceaufruf DataService für Sie im Ordner/providers und sollte es in app-modules .. verbinden und @Injectable Service für Sie erstellen .. Schreiben Sie die http.get in diesem ..

+0

Geist Detaillierung mehr? Ich bin ein Neuling in Ionic. Vielen Dank! –

0

Sie tun nicht brauchen diese XMLHttpRequest, sollten Sie Http von @angular/http verwenden. Um es zu nutzen richtig, können Sie einen Provider wie folgt erstellen:

erstellen Provider (genannt Anfrage zum Beispiel) mit ionic g provider request

Setzen Sie den Anbieter in app.module.ts, um es in Ihrer Anwendung zur Verfügung zu stellen (Sie können dies tun, , indem Sie es importieren und dann in Anbietern auflisten).

import { RequestService } from '../providers/request-service.ts'; 
... 

@NgModule({ 
    providers: [ 
    RequestService 
    ] 
}) 

Jetzt können Sie beginnen, mit dem Anbieter zu arbeiten. Die wichtigsten Dinge sind bereits standardmäßig importiert. Beginnen Sie mit dem Schreiben einer Funktion namens get zum Beispiel.

Endlich können Sie zu Ihrer Seite zurückkehren und den Anbieter durch Importieren verwenden.

import { RequestService } from '../providers/request-service.ts'; 
...  

private data: any; 
... 

    constructor(public request: RequestService) {} 

    ionViewDidLoad() { 
     this.data = this.request.get('https://jsonplaceholder.typicode.com/posts'); 
    } 

Hinweis, dass kein Fehler zur Zeit der Handhabung ist. Daher bleibt die Variable data wahrscheinlich nicht definiert, wenn die Anfrage fehlschlägt.