CODEWITHSUNDEEP
angulartypescript
Jemuel Elimanco
Jemuel Elimanco

Reputation: 556

Error: Supplied parameters do not match any signature of call target

I am new to Angular and I'm having a problem with the compilation of my code.

This is the error message: app/car-parts.component.ts(17,27): error TS2346: Supplied parameters do not match any signature of call target.

Code:

car-parts.component.ts

import { Component } from '@angular/core';
import { CarPart } from './car-part';
import { RacingDataService } from './racing-data.service';

@Component({
    selector: 'car-parts',
    templateUrl: 'app/car-parts.component.html',
    styleUrls: ['app/css/car-parts.component.css']
})
export class CarPartsComponent{
    carParts: CarPart[];

    constructor(private racingDataService: RacingDataService){}

    // ngOnInit is invoked after the component is constructed
    ngOnInit(){
        let racingDataService = new RacingDataService();
//      this.carParts = racingDataService.getCarParts();
        this.racingDataService.getCarParts().subscribe(carParts => this.carParts = carParts);
    }
    getTotalCarParts(){
        let sum = 0;
        if(Array.isArray(this.carParts)){
            for(let carPart of this.carParts){
                sum += carPart.inStock;
            }
        }
        return sum;
//       return this.carParts.reduce((prev,curr) => prev + curr.inStock,0);
    }
    upQuantity(carPart){
        if(carPart.quantity < carPart.inStock)
            carPart.quantity++;
        else{
            alert("The ordered quantity exeeded the stocks");
        }
    }
    downQuantity(carPart){
        if(carPart.quantity > 0)
            carPart.quantity--;
    }
}

racing-data.service.ts

import { CARPARTS } from './mock';
import { Injectable } from '@angular/core';
import { CarPart } from './car-part';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class RacingDataService{

    constructor(private http: Http){

    }

    getCarParts(){
        return this.http.get('app/car-parts.json').map(response =>  <CarPart[]>response.json().data );
//      return CARPARTS
    }

}

Upvotes: 0

Views: 342

Answers (2)

yesnik
yesnik

Reputation: 4695

I got the similar error for this Angular app: Error: Can't resolve all parameters for CarPartsComponent: (?). This helped me:

car-parts.component.ts:

import { Component } from '@angular/core';
import { CarPart } from './car-part';
import { RacingDataService } from './racing-data.service'

@Component({
  selector: 'car-parts',
  templateUrl: './car-parts.component.html',
  styleUrls: ['./car-parts.component.css']
})
export class CarPartsComponent {
  carParts: CarPart[];

  ngOnInit() {
    this.carParts = this.racingDataService.getCarParts();
  }

  constructor(private racingDataService: RacingDataService) {}
}

app.component.ts

import { Component } from '@angular/core';
import { RacingDataService } from './racing-data.service'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [RacingDataService]
})
export class AppComponent {
  title = 'Welcome to racing';
}

Upvotes: 0

Avnesh Shakya
Avnesh Shakya

Reputation: 3906

Try this:

Add service in providers:

@Component({
  ...,
  providers: [RacingDataService]
})

Then remove line:

let racingDataService = new RacingDataService();

from ngOnInit().

It should be like this:

ngOnInit(){
    this.racingDataService.getCarParts().subscribe(carParts => this.carParts = carParts);
}

Hope this will work for you.

Upvotes: 1

Related Questions