错误：提供的参数与调用目标的任何签名都不匹配

Question

我是 Angular 新手，我在编译代码时遇到问题。

这是错误信息： app/car-parts.component.ts(17,27): 错误 TS2346: 提供的参数与调用目标的任何签名都不匹配。

代码：

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
    }

}

Answer 1

我收到了这个 Angular 应用程序的类似错误：错误：无法解析 CarPartsComponent 的所有参数：(?)。这对我有帮助：

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

Answer 2

试试这个：

在providers中添加service：

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

然后删除行：

let racingDataService = new RacingDataService();

来自ngOnInit()。

应该是这样的：

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

希望这对你有用。