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 用于在HTML 中本地填充ion-select。 我想要做的是使用在ionViewDidLoad 中从网络服务创建的数组ids 来填充这个ion-select，就像我对modeKeys 所做的那样。我尝试了很多方法都没有成功。

希望您能帮助我解决我的问题。非常感谢。

Answer 1

你不需要这个XMLHttpRequest，你应该使用@angular/http中的Http。要正确使用它，您可以像这样创建提供程序：

使用ionic g provider request 创建一个提供者（例如命名请求）

将提供程序插入app.module.ts，使其在您的应用中可用（您可以通过导入它然后在提供程序中列出它来做到这一点）。

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 可能会保持未定义状态。

Answer 2

您可以使用 http.get(fileonOSsystem) 并直接从驱动器加载您的 json 文件以模拟屏幕布局。见here。 Angular 和 Ionic 的原理完全相同。示例从项目根目录创建文件夹 /data。同样适用于离子。 ionic g provider Data - 将在 /providers 文件夹中为您创建一个服务调用 DataService 并将其连接到 app-modules.. 并为您创建 @Injectable 服务.. 将 http.get 写入其中..