Question

我在使用我的应用中的ts中的ionViewDidLoad中创建的变量时遇到问题。

＆＃13;

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

＆＃13;

变量carrera和modeKeys用于在HTML中定位填充ion-select。我想要做的是使用来自网络服务的ids中创建的数组ionViewDidLoad来填充此ion-select，就像使用modeKeys一样。我尝试过很多方法都没有成功。

希望你能解决我的问题。非常感谢。

Answer 1

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

Answer 2

您不需要此XMLHttpRequest，您应该使用Http中的@angular/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可能会保持未定义。

ionViewDidLoad（Ionic 3）

2 个答案: