ionViewDidLoad（Ionic 3）のアクセス変数

Question

私のアプリ内のtsでionViewDidLoadで作成された変数にアクセスする際に問題があります。

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"); 
 
    } 
 
}

変数carreraとmodeKeysはとlocalYに使用されているHTMLでion-selectを取り込みます。 私はion-selectをmodeKeysと同じように配置するために、ionViewDidLoadで作成された配列idsをウェブサービスから使用します。私は成功していない多くの方法を試した。

私の問題で私を助けてくれることを願っています。とても有難い。

Answer 1

http.get（fileonOSsystem）を使用して、jsonファイルをドライブから直接ロードして、画面レイアウトをモックすることができます。 hereを参照してください。 AngularとIonicでの正確な同じ原理。例は、プロジェクトルートからフォルダ/データを作成します。同じことがIonicにも当てはまります。 ionic g provider Data -/providersフォルダにDataServiceというサービスコールを作成し、それをapp-modulesに配線し、@ Injectableサービスを作成します.. http.getを書き込んでください..

Answer 2

XMLHttpRequestを必要としない場合はHttpを@angular/httpから使用してください。それを適切に使用するには、このようなプロバイダを作成することができます

アプリでそれを利用可能にするために、app.module.tsにプロバイダを挿入ionic g provider request

で（例えば、要求をという名前の）プロバイダを作成します（あなたはこれを行うことができます、それをインポートしてプロバイダにリストする）。

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

@NgModule({ 
    providers: [ 
    RequestService 
    ] 
}) 

これでプロバイダの使用を開始できます。最も重要なことは既定で既にインポートされています。たとえば、getという関数の書き込みを開始します。

public get (url: string) : any { 
    this.http.get(url).map(res => res.json()).subscribe(result => { 
    console.log(result); 
    return result; 
    }); 
} 

最後に、ページに戻ってプロバイダを使用してインポートすることができます。

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'); 
    } 

注現時点での取り扱い誤りがないことを。したがって、変数dataは、要求が失敗したときにおそらく未定義のままです。