ngForディレクティブのテンプレートは、Ajaxリクエスト

Question

郵便サービスファイル

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

アプリのコンポーネントは、いくつかのデータを盗んするポストサービス（上記）を使用し、私は希望のレンダリングページにレンダリングする

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

これは、任意のエラーを与えるものではありませんが、また、それはレンダリングされません、誰かが助けることができますか？

ありがとうございます。私が見

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

・ホープ、このことができます！