When I put an array of objects to firefox (using typescript) and I get the data am I not able to get it as an array of objects?

I am saving an array of Recipe to a Firebase database, using the following code:

save() {
  this.http.put(
    this.recipeURL,
    this.recipesService.getRecipes()
  ).subscribe(
    (response) => {
      console.log(response);
    }
  );
}

The Recipe model is defined as follows (nothing fancy):

export class Recipe {
  public id: number;
  public name: string;
  public description: string;
  public imagePath: string;
  public ingredients: Ingredient[];

  constructor(id: number, name: string, desc: string, imagePath: string, ingredients: Ingredient[]) {
    this.id = id;
    this.name = name;
    this.description = desc;
    this.imagePath = imagePath;
    this.ingredients = ingredients;
  }
}

When, afterwards, I retrieve the data using the following code:

read() {
  this.http.get<Recipe[]>(
    this.recipeURL
  ).subscribe((recipes) => {
    console.log(recipes);
    console.log(this.recipesService.getRecipes());
  })
}

…it seems that I am retrieving an Array of Json objects, not Recipe objects.

In the code, I am logging the response of the get method as well as the original list of Recipe objects that I want to replace. Below you find a screenshot of the difference between the two, when you look at the console output.

enter image description here

As you see, one is an Array of {...}, the other an Array of Recipe.

Hope someone can help explaining/solving this. The problem is that, after I assign the data I got from my Firebase database, and I update my application (using a Subject), that my page is not showing the new data, but keeps showing the old data.

Source: New feed