Ionic 2 Ajax JSON Daten zu ngFor

Ich habe script.php, die JSON-Array mit Daten aus mySQL erstellen;
1. Weiter Schritt - Ich habe dieses JSON-Array über AJAX;
2. Ich möchte divs in Schleife über ngFor, erstellen, aber ich habe keine Ahnung, wie ich diese JSON-Array von Ajax Erfolgsfunktion zurückrufen kann.

Dank für die Hilfe!Ionic 2 Ajax JSON Daten zu ngFor

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 - nicht arbeiten

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 - Arbeits

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

Quelle

2017-06-22 BLVCK MEISTER

Nicht verwandt mit Ihrer Frage, aber ... warum verwenden Sie jQuery? Sie verwenden besser den http-Client von Angular: https://angular.io/guide/http. Um Ihre Frage zu beantworten, müssen Sie this.displayData mit dem Array festlegen, das von Ihrer API zurückgegeben wurde. –

Vielen Dank für die Antwort, ich bin neu in Angular 2, und dieses Framework so schwer für mich jetzt, coz ich verstehe nicht, warum ich httpMudule Komponente in app.module.ts brauche dann muss ich dieses Modul in der App deklarieren .module.ts, nachdem ich die Möglichkeit habe, Http in meine home.ts aufzunehmen, und nach diesen Bewegungen kann ich this.http.get ('http://example.com/data.php') schreiben. WARUM SO HART? Ich möchte nur jQuery aufnehmen, ich habe keine Ahnung .... –

Vermeiden Sie zuerst die Verwendung von jQuery. Verwenden Sie Angular-Tools wie den Http-Client. Setzen Sie das Array dann auf 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; 
    }) 
}

Quelle

2017-06-22 18:16:02

Ionic 2 Ajax JSON Daten zu ngFor

Antwort

Verwandte Themen