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

回答

相關問題