類型錯誤：無法讀取未定義的屬性“getPosts”

Question

我正在嘗試使用 angular 2 中的 http 服務獲取發布數據，但不明白我在這里做錯了什么..
我在這里使用Plunker
我已經 console.logged 並顯示此錯誤。 如何解決這個未定義的問題？

錯誤：

ZoneAwareError
message
:"(SystemJS) TypeError: Cannot read property 'getPosts' of undefined↵ 
at execute     
(https://run.plnkr.co/YV2OxH7SpFuwfVbA/src/app.ts!transpiled:48:30)↵        
at ZoneDelegate.invoke  
(https://unpkg.com/zone.js@0.7.5/dist/zone.js:242:26)↵      at 
Zone.run (https://unpkg.com/zone.js@0.7.5/dist/zone.js:113:43)↵     at 
https://unpkg.com/zone.js@0.7.5/dist/zone.js:535:57↵        at 
ZoneDelegate.invokeTask 
(https://unpkg.com/zone.js@0.7.5/dist/zone.js:275:35)↵      at 
 Zone.runTask (https://unpkg.com/zone.js@0.7.5/dist/zone.js:151:47)↵        
at drainMicroTaskQueue 
(https://unpkg.com/zone.js@0.7.5/dist/zone.js:433:35)↵  Error loading  
 https://run.plnkr.co/YV2OxH7SpFuwfVbA/src/main.ts"
 name
 :
 "Error"

應用程序

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {HttpModule} from '@angular/http';
import {PostsService} from './posts';

@Component({
  selector: 'my-app',
  template: `
    <h3>Posts</h3>
    <div *ngFor="let post of posts | async">
        <h3>{{post.title}}</h3>
        <p>{{post.body}}</p>
    </div>
  `,
  providers: [PostsService]

})
export class App {
  posts:Post[];
  constructor(private postsService: PostsService) {
    this.name = 'Angular2'
  }

  this.postsService.getPosts().subscribe(posts => {
  this.posts = posts;
}

@NgModule({
  imports: [ BrowserModule, HttpModule ],
  declarations: [ App  ],
  bootstrap: [ App ]
})
export class AppModule {}

interface Post{
    id: number;
    title: string;
    body: string;
}

帖子.ts

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class PostsService {
    constructor(private http: Http){
        console.log('PostsService Initialized...');
    }

    getPosts(){
    return this.http.get('https://jsonplaceholder.typicode.com/posts')
            .map(res => res.json());
    }
}

這是 plunker - https://plnkr.co/edit/jWaPbNlqsqXoOFFRzhhX?p=preview

Answer 1

蘇珊特，

您需要在方法的主體中訂閱——您放置代碼的當前位置將被視為聲明，並將在服務實例化之前對其進行操作。

您有多種選擇，這里是其中之一：

import {OnInit} from '@angular/core'
...
export class App implements OnInit {
  posts:Post[];
  constructor(private postsService: PostsService) {
    this.name = 'Angular2'
  }

  ngOnInit(){
    this.postsService.getPosts().subscribe(posts => {
      this.posts = posts;
    }
}

OnInit 在實例化組件時被稱為生命周期鈎子，因此您將能夠在此處引用“實時”可觀察對象。

考慮這個關於生命周期鈎子的 Angular 2 文檔的鏈接： https : //angular.io/docs/ts/latest/guide/lifecycle-hooks.html

Answer 2

嘗試這個：

constructor(private postsService: PostsService) {
  this.postsService.getPosts().subscribe(posts => {
    console.log(posts);
    this.posts = posts;
  }
}