Question

我有script.php，它使用来自mySQL的数据创建json数组;
1. 接着 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");
      }
    })
  }
}

Answer 1

首先，避免使用jQuery。使用Angular＆＃39;工具，像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;
    })
}

Ionic 2 ajax JSON数据到ngFor

1 个答案: