如何使用fetchApi angular2 TYpescript在视图中绑定Ajax结果

我正在使用typescript构建我的第一个angular2应用程序。我可以使用fetchApi获取结果，但我无法识别。请指导我向视图展示我的数据。非常感谢。

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

主.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();
        });
    }
}

我认为你的错误就在这里：

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

尝试更改代码如下：

this.photos = photos.data.collection;

相关内容

最新更新

热门标签：