Angular considers instances of specific class as Object

Question

I have the following service in angular 4:

import { Injectable, EventEmitter } from '@angular/core';
import {Recipe} from './recipe'
import {Ingredient} from '../shared/ingredient'
@Injectable()
export class RecipeService {

  private recipes:Recipe[]=[new Recipe("Dummy","Dummy","http://media.wiley.com/product_data/coverImage300/2X/04707687/047076872X.jpg",[new Ingredient("French Food",5),new Ingredient("Dummy Book",1)]),
                   new Recipe("jahangiri","a perfect vice president","http://biographyha.com/wp-content/uploads/2014/12/Eshaq-Jahangiri-biographya-com-2.jpg",[new Ingredient("French Food",5),new Ingredient("Dummy Book",1)]) ]

  //do some functionalities

  getRecipe(id:number)
  {
    return this.recipes[id];
  }
  editRecipe(oldRecipe:Recipe,newRecipe:Recipe)
  {
    this.recipes[this.recipes.indexOf(oldRecipe)]=newRecipe as Recipe;
    console.log(newRecipe as Recipe)
  }

  //do other functionalities
}

in which Recipe and Ingredient are classes that are used in app. I expect that editRecipe function results in substitution in the intended index.however after substitution getRecipe for the inserted item fails. more examinations revealed that since the inserted item is considered as object ,instead of Recipe ,although I have done explicit casting,it can not find that . what can I do? thank you guys .

Answer 1

It was actually due to a mistake dealing with form handling.I had to make sure that the fields of FormGroup were the same fields of my class ingredient .while I made a mistake there and this is why the argument can not be inferred as Recipe Thank you all guys.