Angular中出现“supplied parameters do not match any signature of call target”报错

Hey there, let's break down this error you're seeing—it almost always boils down to a mismatch between how you're calling a method and how it's defined, usually around type handling with Observables and the old Http module. Looking at your code snippet, here are the most likely fixes:

1. You're not properly mapping the Http response to your IEmployee type #

In older Angular versions (using @angular/http instead of HttpClient), http.get() returns an Observable<Response>, not directly the array of employees you need. If you skip converting that response to your IEmployee[] type, the method's return signature won't match what you're actually returning.

Here's the corrected getEmployees method, with proper mapping and error handling:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http'; // Don't forget to import Response!
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'; // Import the map operator to transform the response
import 'rxjs/add/operator/catch'; // Optional, but useful for error handling
import { IEmployee } from './employee';

@Injectable()
export class EmployeeService {
  private _url: string = "/assets/data/employees.json";
  constructor(private http:Http) { }

  getEmployees(): Observable<IEmployee[]> {
    return this.http.get(this._url)
      // Map the raw Response to your IEmployee array type
      .map((response: Response) => <IEmployee[]>response.json())
      // Optional: Add error handling to catch HTTP issues
      .catch(this.handleError);
  }

  // Helper method for error handling
  private handleError(error: Response) {
    return Observable.throw(error.statusText || 'Server error');
  }
}

2. Missing RxJS operators or incorrect Observable imports #

If you forget to import operators like map, RxJS won't recognize them, which can lead to weird signature mismatch errors. Double-check that you've added the necessary imports for any operators you're using (like map or catch).

For older RxJS versions (pre-6), you import operators with:

import 'rxjs/add/operator/map';

3. Mismatched method return type vs actual return value #

Your method declares it returns Observable<IEmployee[]>, but if you just return this.http.get(this._url) directly, that's an Observable<Response>—which doesn't match the signature. The map operator in the first fix resolves this by transforming the response to the correct type.

Pro Tip: Upgrade to HttpClient (Way Easier!) #

If you're on Angular 4.3 or newer, ditch the old Http module and use HttpClient instead. It automatically parses JSON responses and supports generics, so you avoid all this manual mapping mess:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; // Import HttpClient
import { Observable } from 'rxjs';
import { IEmployee } from './employee';

@Injectable()
export class EmployeeService {
  private _url: string = "/assets/data/employees.json";
  constructor(private http: HttpClient) { }

  getEmployees(): Observable<IEmployee[]> {
    // Just specify the generic type, and HttpClient handles the rest!
    return this.http.get<IEmployee[]>(this._url);
  }
}

This should eliminate the signature mismatch error entirely, and your code will be cleaner to boot.

内容的提问来源于stack exchange，提问作者dipesh