Question

我正在使用Angular 6应用。我正在尝试将服务注入到我的组件中，当我遇到以下错误时 未捕获的错误：无法解析ProductListComponent的所有参数：（？）。错误不是特定的，因此我无法跟踪导致此代码的行。我的IDE中没有错误。我在做什么错了？

// Product-list component

import {
  Component,
  OnInit
} from '@angular/core';
import {
  IProduct
} from './product';
import {
  ProductService
} from './product.service';


@Component({
  selector: 'pm-products',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})

export class ProductListComponent implements OnInit {
  pageTitle: string = 'Product List';
  imageWidth: number = 50;
  imageMargin: number = 2;
  showImage: boolean = true;

  _listFilter: string = '';
  get listFilter(): string {
    return this._listFilter;
  }

  set listFilter(value: string) {
    this._listFilter = value;
    this.filteredProducts = this.listFilter ? this.performFilter(this.listFilter) : this.products;

  }

  filteredProducts: IProduct[];
  products: IProduct[] = [];

  constructor(private productService: ProductService) {
    this.listFilter = 'cart';
  }

  OnRatingClicked(message: string): void {
    this.pageTitle = `Product list: ${message}`;
  }

  performFilter(filterBy: string): IProduct[] {
    filterBy = filterBy.toLocaleLowerCase();
    return this.products.filter((product: IProduct) =>
      product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
  }

  toggleImage(): void {
    this.showImage = !this.showImage;
  }

  ngOnInit(): void {
    console.log('OnInit');
    this.filteredProducts = this.products;
    this.products = this.productService.getProducts();
  }
}


// product service
import {
  Injectable
} from '@angular/core';
import {
  IProduct
} from './product';

@injectable({
  providedIn: 'root'
});

export class ProductService {

  getProducts(): IProduct[] {
    return [{
        "productId": 1,
        "productName": "Leaf Rake",
        "productCode": "GDN-0011",
        "releaseDate": "March 19, 2016",
        "description": "Leaf rake with 48-inch wooden handle.",
        "price": 19.95,
        "starRating": 3.2,
        "imageUrl": "https://openclipart.org/image/300px/svg_to_png/26215/Anonymous_Leaf_Rake.png"
      },
      {
        "productId": 2,
        "productName": "Garden Cart",
        "productCode": "GDN-0023",
        "releaseDate": "March 18, 2016",
        "description": "15 gallon capacity rolling garden cart",
        "price": 32.99,
        "starRating": 4.2,
        "imageUrl": "https://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png"
      },
      {
        "productId": 5,
        "productName": "Hammer",
        "productCode": "TBX-0048",
        "releaseDate": "May 21, 2016",
        "description": "Curved claw steel hammer",
        "price": 8.9,
        "starRating": 4.8,
        "imageUrl": "https://openclipart.org/image/300px/svg_to_png/73/rejon_Hammer.png"
      },
      {
        "productId": 8,
        "productName": "Saw",
        "productCode": "TBX-0022",
        "releaseDate": "May 15, 2016",
        "description": "15-inch steel blade hand saw",
        "price": 11.55,
        "starRating": 3.7,
        "imageUrl": "https://openclipart.org/image/300px/svg_to_png/27070/egore911_saw.png"
      },
      {
        "productId": 10,
        "productName": "Video Game Controller",
        "productCode": "GMG-0042",
        "releaseDate": "October 15, 2015",
        "description": "Standard two-button video game controller",
        "price": 35.95,
        "starRating": 4.6,
        "imageUrl": "https://openclipart.org/image/300px/svg_to_png/120337/xbox-controller_01.png"
      }
    ]
  }
}

// product interface
export interface IProduct {
  productId: number;
  productName: string;
  productCode: string;
  releaseDate: string;
  description: string;
  price: number;
  starRating: number;
  imageUrl: string;
}

Answer 1

@Injectable()装饰器可能会出现拼写错误。代替：

@injectable({
  providedIn: 'root'
});
export class ProductService { ... }

尝试以下操作：

@Injectable({
  providedIn: 'root'
})
export class ProductService { ... }

@Injectable()需要大写的“ I”以匹配导入的符号import { Injectable } from '@angular/core';。您的示例在@Injectable({})的右括号后加上小写的“ i”和分号。

希望有帮助！

未捕获的错误：无法解析ProductListComponent的所有参数？

1 个答案: