角度2エラーGETリクエストをしながら：TS2346：指定されたパラメータは、コールターゲット

Question

のいずれかの署名と一致していない私は、角のドキュメント次のような単純なGETリクエストを作成しようとしています：https://angular.io/docs/ts/latest/guide/server-communication.html

はまだライン15に、このエラーを取得エディタで。

return this.http.get(this.heroesUrl) 
      .map(this.extractData) 

ここに完全なコードを見つけてください：

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 

import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 

@Injectable() 

export class EventListService { 
    private heroesUrl = '/data.json'; // URL to web API 
    constructor (private http: Http) {} 
    getEvents(): Observable<Hero[]> { 
     return this.http.get(this.heroesUrl) 
      .map(this.extractData) 
      .catch(this.handleError); 
    } 
    private extractData(res: Response): Hero[] { 
     let body = res.json(); 
     return body.data || { } as Hero[]; 
    } 
    private handleError (error: Response | any) { 
     // In a real world app, we might use a remote logging infrastructure 
     let errMsg: string; 
     if (error instanceof Response) { 
      const body = error.json() || ''; 
      const err = body.error || JSON.stringify(body); 
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
     } else { 
      errMsg = error.message ? error.message : error.toString(); 
     } 
     console.error(errMsg); 
     return Observable.throw(errMsg); 
    } 
} 

interface Hero { 

} 

はgetEventsメソッドを呼び出す：

import { Component, OnInit } from '@angular/core'; 
import { EventListService } from '../services/event-list.service'; 

@Component({ 
    selector: "event-list", 
    templateUrl: "./event-list/event-list.component.html", 
    styleUrls: ["./event-list/event-list.component.css"], 
    providers: [ EventListService ] 
}) 

export class EventListComponent implements OnInit{ 
    showImage: boolean = true; 
    searchString: string = ""; 
    eventList: any[] = []; 
    constructor(private eventListService: EventListService) { 
     eventListService.getEvents(); 
    } 
    ngOnInit() { 
     console.error("INIT"); 
    } 
    toggleImage():void { 
     this.showImage = !this.showImage; 
    } 
    ratingClicked(data) { 
     console.error(data); 
    } 
} 

Answer 1

はあなたのエラーは、ここに次のようになります。

getEvents(): Observable<Hero[]> { 
    return this.http.get(this.heroesUrl) 
     .map(this.extractData) 
     .catch(this.handleError); 
} 
private extractData(res: Response): Hero[] { 
    ... 
} 

あなたはmissmatchを参照してください。 getEventsはObservableをHero Arrayに返しますが、extractDataはHero配列を返しています。

だけにあなたのextractDataを変更します。

private extractData(res: Response) { 
    let body = res.json(); 
    return body.data || { } 
} 

と私が参照hereごとに、あなたの代わりにコンストラクタのngOnInitへgetEventsの呼び出しを移動示唆ので、代わりにこれを行うだろう：

ngOnInit() { 
    this.eventListService.getEvents() 
     .subscribe(d => { 
     this.eventList = d}) 
} 

とeventListは、次のとおりです。

eventList: Hero[] = []; 

Answer 2

はちょうどそれが要求を行っていない理由がある、サービスコールに加入。このため

export class EventListComponent implements OnInit{ 
    showImage: boolean = true; 
    searchString: string = ""; 
    eventList: any[] = []; 
    constructor(private eventListService: EventListService) { 
     eventListService.getEvents(); 
    } 
    ngOnInit() { 
     console.error("INIT"); 
    } 
    toggleImage():void { 
     this.showImage = !this.showImage; 
    } 
    ratingClicked(data) { 
     console.error(data); 
    } 
} 

：この

変更

export class EventListComponent implements OnInit{ 
    showImage: boolean = true; 
    searchString: string = ""; 
    eventList: any[] = []; 
    constructor(private eventListService: EventListService) { 
     eventListService.getEvents().subscribe((response:Hero[]) => { 
      console.log(response); 
     }); 
    } 
    ngOnInit() { 
     console.error("INIT"); 
    } 
    toggleImage():void { 
     this.showImage = !this.showImage; 
    } 
    ratingClicked(data) { 
     console.error(data); 
    } 
}