ionic ajax数据,Ionic 2 ajax JSON数据到ngFor

我有script.php创建json数组与mySQL的数据;

Next step - 我通过AJAX得到了这个json数组;

我想在循环中通过ngFor创建div，但我不知道如何从Ajax成功函数回调此json数组。

Home.html中

Text: {{ data.text }} - Value: {{ data.value }}

Home.ts - 不要工作

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import * as $ from 'jquery';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

pages: string = "app";

constructor(public navCtrl: NavController) {

}

ionViewDidLoad(): any {

$.ajax({

type: "GET",

url: "http://example.com/data.php",

data: {

first : "first"

},

success: function(data){

displayData = JSON.parse(data);// Getting JSON

error: function(data){

console.log("error");

}

})

}

}

Home.ts - 工作

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import * as $ from 'jquery';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

pages: string = "app";

constructor(public navCtrl: NavController) {

}

displayData = [{

"text": "item 1",

"value": 1

},

{

"text": "item 2",

"value": 2

},

{

"text": "item 3",

"value": 3

},

{

"text": "item 4",

"value": 4

},

{

"text": "item 5",

"value": 5

},

];

ionViewDidLoad(){

$.ajax({

type: "GET",

url: "http://example.com/data.php",

data: {

first : "first"

},

success: function(data){

alert("good!");

},

error: function(data){

console.log("error");

}

})

}

}

+0

与您的问题没有关系，但是......您为什么使用jQuery？您最好使用Angular的http客户端：https：//angular.io/guide/http。在回答你的问题时，必须使用从API返回的数组来设置this.displayData。 –

+0

谢谢你的回答，我是Angular 2中的新手，现在这个框架对我来说很难，因为我不明白为什么我需要在app.module.ts中包含httpMudule组件，然后我需要在应用程序中声明此模块.module.ts，在我有机会将Http包含在我的home.ts中之后，在这个动作之后，我可以编写this.http.get('http://example.com/data.php')。为什么这么难？我想只包括jquery，我不知道.... –