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() {
    (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() {
  ).subscribe((recipes) => {

…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