Angular 2 发出获取请求时出错：TS2346：提供的参数与调用目标的任何签名都不匹配

Question

我正在尝试根据 angular 文档发出一个简单的获取请求：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

只需订阅服务调用，这就是它不执行请求的原因。

改变这个：

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

Answer 2

您的错误可能在这里：

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

你看到错配了。 getEvents 返回一个 Hero 数组的 Observable，但是你的 extractData 返回一个 Hero 数组。

只需将您的 extractData 更改为：

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

我建议您将 getEvents 的调用移动到 ngOnInit 而不是构造函数，根据参考，所以改为这样做：

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

和eventList应该是：

eventList: Hero[] = [];

Angular 2 发出获取请求时出错：TS2346：提供的参数与调用目标的任何签名都不匹配

Angular 2 Error while making get request: TS2346: Supplied parameters do not match any signature of call target

javascript

angular2-services

angular