Wie bindet man Ajax Ergebnis in View mit fetchApi angular2 Typescript?

Ich baue meine erste angular2 App mit typescript. Ich kann Ergebnisse mit fetchApi abrufen, aber ich kann mich nicht identifizieren. Bitte helfen Sie mir, meine Daten in Ansichten zu präsentieren. Danke.Wie bindet man Ajax Ergebnis in View mit fetchApi angular2 Typescript?

App.components.ts

///<reference path="../node_modules/angular2/typings/browser.d.ts"/> 
import {Component} from "angular2/core"; 

import {Mallspk} from './mallspk' 
import {NgFor} from "angular2/common"; 
export class Hero{ 
    id:number; 
    name:string; 
} 



@Component({ 
    selector: 'my-app', 
    template: '<input type="text" [(ngModel)]="title" /><h1>{{title}}</h1>' 
}) 
export class AppComponent 
{ 
    title="Tour of Heroes"; 
    hero: Hero={ 
     id:1, 
     name:"Qasim" 
    }; 
} 


@Component({ 
    selector:"my-app-selector", 
    bindings:[Mallspk], 
    template:` 
    <input type="search" [(ngModel)]="search" #photoQuery /> 

    <button (click)="searchPhotos(photoQuery.value)">Search photos</button> 
    <ul> 

    <li *ngFor="#photo of photos"> 
     <table> 
      <tr> 
       <td> 
        {{photo.title}} 
       </td> 
       <td> 
        photo.isActive 
       </td> 
       <td> 
        <img [src]="photo.imageUrl" width="250px"> 
       </td> 
      </tr> 
     </table> 

    </li> 
    </ul> 
    `, 
    directives: [NgFor] 
}) 

export class PhotoView{ 
    mallspk=null; 
    photos=null; 
    search=null 
    constructor(mallspk:Mallspk){ 
     this.mallspk=mallspk; 
     this.search="text" 
    } 

    searchPhotos(query){ 
     this.mallspk.searchPhotos(query).then((photos)=>{ 
      console.log(photos); 
      this.photos=photos.data.collection.brands; 
     }); 
    } 
}

main.ts

import {bootstrap} from "angular2/platform/browser"; 
import {AppComponent, PhotoView} from "./app.components"; 

bootstrap(AppComponent); 
bootstrap(PhotoView)

insex.html

<html> 
<head> 
    <title>Angular 2 QuickStart</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="style.css"> 
    <!-- 1. Load libraries --> 
    <!-- IE required polyfills, in this exact order --> 
    <script src="node_modules/es6-shim/es6-shim.min.js"></script> 
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script> 

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script> 
    <!-- 2. Configure SystemJS --> 
    <script> 
     System.config({ 
      packages: { 
       app: { 
        format: 'register', 
        defaultExtension: 'js' 
       } 
      } 
     }); 
     System.import('app/main') 
       .then(null, console.error.bind(console)); 
    </script> 
</head> 
<!-- 3. Display the application --> 
<body> 
<my-app>Loading...</my-app> 
<br> 
<my-app-selector></my-app-selector> 
</body> 
</html>

mallspk.ts

declare var fetch; 
export class Mallspk{ 
    searchPhotos(query) { 
     return fetch(`http://www.malls.pk/api/index.php/malls/mall?city_name=Lahore&city_name=Lahore&lat=12&lng=23`).then(function(response) { 

      return response.json(); 
     }); 
    } 

}

Quelle

2016-05-04 Qasim Khokhar

Was ist das Problem? Ist 'console.log (Fotos);' irgendwas auszudrucken? Erhalten Sie eine Fehlermeldung in der Browserkonsole? –

Ja, ich kann meine Daten auf der Konsole sehen. –

Ich denke, dass Ihr Fehler hier befindet:

this.mallspk.searchPhotos(query).then((photos)=>{ 
    this.photos = photos.data.collection.brands; <== collection isn't contained property brands 
});

Versuchen Änderungscode folgend:

this.photos = photos.data.collection;

Quelle

2016-05-04 11:22:17 yurzui

Wie bindet man Ajax Ergebnis in View mit fetchApi angular2 Typescript?

Antwort

Verwandte Themen