U
U
Umid2017-04-04 21:19:57
typescript
Umid, 2017-04-04 21:19:57

Error: Invalid providers for "MyTableComponent" - only instances of Provider and Type are allowed, got: [?undefined?] (ANGULAR 2)?

Good evening.
The above error is displayed.
1dd4ed13b78d4506b2379f222bdf444d.png
Component and service scripts (Full code, right after the screenshot):
a5bfc8d47b724be8abd3927f82f77a29.png

myTable.component.ts
import { Component } from "@angular/core";
import { ProductsService } from "../index";

@Component({
  moduleId: module.id,
  selector: "my-table",
  templateUrl: "myTable.component.html",
  styleUrls: ["myTable.component.css"],
  providers: [ProductsService],
  inputs: ["rows"]
})
export class MyTableComponent {
  rows: number;
  info = [];
  categories = {
    category1: [],
    category2: [],
    category3: []
  };
  newProductName: string = "Default Name";
  newProductPrice: number = 0;

  constructor(private products: ProductsService) {}

  getCategory(product) {
    var result;
    if (product.price <= 300) {
      result = 'Category 1';
      this.categories.category1.push(product);
    } else if (product.price <= 700 && product.price > 300) {
      result = 'Category 2';
      this.categories.category2.push(product);
    } else if(product.price > 700) { 
      result = 'Category 3';
      this.categories.category3.push(product);
    }
    return result;
  }

  sort(cat) {
    let that = this;
    switch(cat) {
      case '*':
        sorting(this.info);
        break;
      case 1:
        sorting(this.categories.category1);
        break;
      case 2:
        sorting(this.categories.category2);
        break;
      case 3:
        sorting(this.categories.category3);
        break;
    }

    function sorting(category) {
      that.info.map(function(product) {
        product.hiddenByCategory = true;
      });
      category.map(function(product) {
        product.hiddenByCategory = false;
      });
    }
  }

  addProduct() {
    let product = {
      id: this.info.length + 1,
      name: this.newProductName,
      price: this.newProductPrice
    };

    this.info.push(product);
  }

  ngOnInit() {
    this.info = this.products.products.slice(0, this.rows);
  }
}

products.ts (Service)
import { Injectable } from '@angular/core';

@Injectable()
export class ProductsService {
  products = [
    { id: 1, name: "product 1 ", price: 100 },
    { id: 2, name: "product 2 ", price: 200 },
    { id: 3, name: "product 3 ", price: 300 },
    { id: 4, name: "product 4 ", price: 400 },
    { id: 5, name: "product 5 ", price: 500 },
    { id: 6, name: "product 6 ", price: 600 },
    { id: 7, name: "product 7 ", price: 700 },
    { id: 8, name: "product 8 ", price: 800 },
    { id: 9, name: "product 9 ", price: 900 },
    { id: 10, name: "product 10", price: 1000 }
  ];

  addProduct(newProduct) {
    this.products.push(newProduct);
  }
}


Identical code here: plunker , the only difference is that the plunker doesn't throw errors.
If you have read up to this line, then thank you very much for not passing by indifferently.
I really hope for your help. Thank you in advance.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question