Question

我正在尝试按照角度文档制作一个简单的获取请求：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 || { } 
}

我建议你按照引用here将getEvents的调用移到ngOnInit而不是构造函数，所以请改为：

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

和eventList应为：

eventList: Hero[] = [];

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

2 个答案: