ng对ajax请求的指令模板呈现

时间:2016-05-11 21:16:36

标签: javascript angularjs

发布服务文件

import {Http} from 'angular2/http';
import 'rxjs/add/operator/map';
import {Injectable} from "angular2/core";

@Injectable()
export class PostService {

    private  url = "http://jsonplaceholder.typicode.com/posts";
    constructor(private _http: Http) {

    }

    getData() {
        return this._http.get(this.url)
            .map(res => res.json());
    }
}

app.component.ts

app组件使用post post(上面)来检索一些数据,我想在页面中呈现。

import {Component} from 'angular2/core';
import { Observable } from 'rxjs/Rx';
///<reference path="../typings/jquery/jquery.d.ts" />
import {PostService} from './post.service';
import {HTTP_PROVIDERS} from 'angular2/http';


@Component({
    selector: 'my-app',
    template:`

          <ul>
            <li *ngFor="#item of items"> {{item.title}} </li>
          </ul>  
          `,
    providers:[PostService, HTTP_PROVIDERS]
})
export class AppComponent {

    items = [];

    constructor(private  postService: PostService){

        this.postService.getData()
            .subscribe(function (data) {
                this.items = data;
            });
    }
}

它没有给出任何错误但也没有渲染,有人可以帮忙吗?

提前致谢。

1 个答案:

答案 0 :(得分:1)

我看到的一个问题是:

<li *ngFor="#item of items">

假设您使用的是版本rc.1(截至今天5/11/16的最新版本),正确的语法是:

<li *ngFor="let item of items">

此外,这可能不是问题,但您的“订阅”代码块与我通常做的有点不同。

此致:

        this.postService.getData()
        .subscribe(function (data) {
            this.items = data;
        });

我该怎么做:

    this.postService.getData()
        .subscribe(
            data => this.items = data,
            error => alert(error),
            () => console.log("Subscribed")
    )};

希望这有帮助!