"supplied parameters do not match any signature of call target" in angular as the code is given below

Question

As I am going through HTTP and Observables I've encountered the problem indicating the supplied parameters do not match any signature of call target. The code is as given below.

    import { Injectable } from '@angular/core';

    import { Http } from '@angular/http';

    import { Observable } from 'rxjs/Observable';

    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<IEmployee[]>(this._url);

      }

    }

The error occurs at the line

    return this.http.get<IEmployee[]>(this._url);

the json data is in the path located by " _url " string. Also I had created the interface named " IEmployee " inside "employee.ts"

employee.ts

   export interface IEmployee {
        id: number,
        name: string,
        age: number
    }

the versions I'm using is as below

    angular-cli: 1.0.0-beta.28.3
    node: 8.11.1
    os: win32 x64
    @angular/common: 2.4.10
    @angular/compiler: 2.4.10
    @angular/core: 2.4.10
    @angular/forms: 2.4.10
    @angular/http: 2.4.10
    @angular/platform-browser: 2.4.10
    @angular/platform-browser-dynamic: 2.4.10
    @angular/router: 3.4.10
    @angular/compiler-cli: 2.4.10

all other seems right. I need help here thank you.

I used it in a component called " employee-list" and there I want to show the employee list.

    import { Component, OnInit } from '@angular/core';
    import { EmployeeService } from '../employee.service';

    @Component({
      selector: 'employee-list',
      template: `
        <h2> Employee List</h2>
        <ul *ngFor = " let employee of employees " >
          <li> {{ employee.name }} </li>
        </ul>
      `,
       styles: []
    })

    export class EmployeeListComponent implements OnInit {
      public employees = [];
      constructor( private _employeeService: EmployeeService ) { }

      ngOnInit() {
        this._employeeService.getEmployees()
        .subscribe(data => this.employees = data);
      }

    }

Answer 1

Try this

search(term: string): Observable<SearchItem[]> {
    let apiURL = `${this.apiRoot}?term=${term}&media=music&limit=20`;
    return this.http.get(apiURL)
        .map(res => {
          return res.json().results.map(item => {
            return new SearchItem(
                item.trackName,
                item.artistName,
                item.trackViewUrl,
                item.artworkUrl30,
                item.artistId
            );
          });
        });
  }

Change your data accordingly