asked on

error in angular service

hi am geting this error in my angular

my service
//import { EventEmitter } from 'events';
import {EventEmitter} from '@angular/core';
import { Recipe } from './recipe.model';
import { Ingredient } from '../shared/ingredient.model';
//import { ShoppingListService } from './shopping-list/shopping-list.service';
import {shopingListService} from '../shopping-list/shoping-list.service'

//@Injectable()
export class RecipeService{
recipeSelected = new EventEmitter<Recipe>();

private recipes: Recipe[] = [
new Recipe(
'Tasty Schnitzel',
'A super-tasty Schnitzel - just awesome!',
'https://upload.wikimedia.org/wikipedia/commons/7/72/Schnitzel.JPG',
[
new Ingredient('Meat', 1),
new Ingredient('French Fries', 20)
]),
new Recipe('Big Fat Burger',
'What else you need to say?',
'https://upload.wikimedia.org/wikipedia/commons/b/be/Burger_King_Angus_Bacon_%26_Cheese_Steak_Burger.jpg',
[
new Ingredient('Buns', 2),
new Ingredient('Meat', 1)
])
];

constructor(private slService: shopingListService) {}

getRecipes(){
return this.recipes.slice();
}

addIngredientsToShopingList(ingredients: Ingredient[]){
this.slService.addIngredient(ingredients);
}

}

Julian Hansen

The error is self explanatory

The function expects an array you are passing a variable of type Ingredient - and in the other error it is the other way around.

To be able to fix you need to show us all the code - your images have the error message blocking the important bits.

chalie001

ASKER

this the class

import { Component, OnInit, Input } from '@angular/core';


import { Recipe } from '../recipe.model';
import { RecipeService } from '../receipe.service';


@Component({
  selector: 'app-recipe-detail',
  templateUrl: './recipe-detail.component.html',
  styleUrls: ['./recipe-detail.component.css']
})
export class RecipeDetailComponent implements OnInit {
  @Input() recipe: Recipe;


  constructor(private recipeService: RecipeService) { }


  ngOnInit() {
  }
  onAddToShoppingList(){
  this.recipeService.addIngredientsToShopingList(this.recipe.ingredients);
    //this.recipeService.addIngredientsToShoppingList(this.recipe.ingredients);


  }


}

Open in new window

Julian Hansen

That is not enough.

Let me explain what the problem is. You have declared a parameter of type Ingredient[] and you are passing a variable of type Ingredient (and vice versa)

We need to see the definition of those variables - so in the above component there is no information to help us because we have no idea what Recipe looks like (either the definition - or the actual data you are passing in)

You need to show us Recipe AND you need to console.log(this.recipe) and paste the results so we can see that.

That would be the starting point.

chalie001

ASKER

this is the receipe

import { Component, OnInit } from '@angular/core';


import { Recipe } from './recipe.model';
import { RecipeService } from './receipe.service';


@Component({
  selector: 'app-recipes',
  templateUrl: './recipes.component.html',
  styleUrls: ['./recipes.component.css'],
  providers: [RecipeService]
})
export class RecipesComponent implements OnInit {
   selectedRecipe: Recipe;


  constructor(private recipeService:RecipeService) { }


  ngOnInit() {
    this.recipeService.recipeSelected
    .subscribe(
      (recipe: Recipe) => {
        this.selectedRecipe = recipe;
      }
    )
  }


}

Open in new window

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial