Ionic 2 ajax JSON数据到ngFor

我有script.php创建json数组与mySQL的数据;
1. Next step - 我通过AJAX得到了这个json数组;
2. 我想在循环中通过ngFor创建div，但我不知道如何从Ajax成功函数回调此json数组。

Home.html中

<ion-list *ngFor="let data of displayData" no-lines> 
     <ion-item>Text: {{ data.text }} - Value: {{ data.value }}</ion-item> 
    </ion-list>

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

来源

2017-06-22 BLVCK MEISTER

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

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

首先，避免使用jQuery。使用Angular'工具，如Http客户端。然后，将数组设置为displayData。

export class HomePage { 
    pages: string = "app"; 
    displayData = []; 

    constructor(public navCtrl: NavController, public http: Http) { 

    } 

    ionViewDidLoad(){ 
    this.http.get('http://niceshot.pro/data.php') 
    .map(data => data.json()) 
    .subscribe(parsed_data => { 
     this.displayData = parsed_data; 
    }) 
}

来源

2017-06-22 18:16:02

Ionic 2 ajax JSON数据到ngFor

回答

相关问题