Typescript Angular中的其他服务仅获取默认值

我正在try 遵循一个教程在Angular .

Issue #1: 当使用2个服务，即recipe. service. ts(在本地处理数据操作)和data—storage. service. ts(在firebase中存储数据)时会出现问题.当从data-storage.service.ts调用getRecipes()方法时，只返回默认值而不是更新的值.

图像更好地澄清.Browser Dev Tools Console 点击"保存数据"按钮的点在上图中以红色标记.

Issue #2: 教师使用这个. recipes. slice()来提取数据，但如果我使用它，新添加或删除的值不会被反映出来.为了查看更改，我使用了this. recipes. slice(0，this.recipes.length).我的问题是，如果长度改变了，什么是正确的方式来反映它.

内容recipe.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

import { Recipe } from './recipe.model';
import { Ingredient } from '../shared/ingredient.model';
import { ShoppingListService } from '../shopping-list/shopping-list.service';

@Injectable()
export class RecipeService {
  recipesChanged = new Subject<Recipe[]>();

  // private recipes: 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: ShoppingListService) {}

  setRecipes(recipes: Recipe[])
  {
    this.recipes = recipes;     
    this.recipesChanged.next(this.recipes.slice(0,this.recipes.length));
    console.log('setRecipes');
    console.log(this.recipes.slice(0,this.recipes.length));
  }

  getRecipes() 
  {
    console.log('getRecipes');
    console.log(this.recipes.slice(0,this.recipes.length)); 
    return this.recipes.slice(0,this.recipes.length);
  }

  getRecipe(index: number) 
  {
    console.log('getRecipe'); 
    return this.recipes[index];
  }

  addIngredientsToShoppingList(ingredients: Ingredient[]) 
  {
     
    this.slService.addIngredients(ingredients);
    console.log('addIngredientsToShoppingList');
    console.log(this.recipes.slice(0,this.recipes.length));
  }

  addRecipe(recipe: Recipe) 
  {    
    this.recipes.push(recipe);
    this.recipesChanged.next(this.recipes.slice(0,this.recipes.length));
    console.log('addRecipe');
    console.log(this.recipes.slice(0,this.recipes.length));
  }

  updateRecipe(index: number, newRecipe: Recipe) 
  {
    
    this.recipes[index] = newRecipe;
    this.recipesChanged.next(this.recipes.slice(0,this.recipes.length));
    console.log('updateRecipe'); 
    console.log(this.recipes.slice(0,this.recipes.length));
  }

  deleteRecipe(index: number) 
  {
     
    this.recipes.splice(index, 1);       
    this.recipesChanged.next(this.recipes.slice(0,this.recipes.length));
    console.log('deleteRecipe');
    console.log(this.recipes.slice(0,this.recipes.length));
  }
}

内容data-storage.service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { RecipeService } from "../recipes/recipe.service";
import { Recipe } from "../recipes/recipe.model";
import { map, tap } from 'rxjs/operators';

@Injectable({providedIn: 'root'})
export class DataStorageService 
{
    constructor(private http: HttpClient, private recipeService: RecipeService)
    {

    }

    storeRecipes()
    {
        const recipes = this.recipeService.getRecipes();
        console.log('storeRecipes');
        console.log(recipes);
        // this.http.put('https://....../recipes.json', recipes)
        // .subscribe(response => console.log(response));
    }

    fetchRecipes()
    {
        return this.http
        .get<Recipe[]>(
          'https://....../recipes.json'
        )
        .pipe(
          map(recipes => {
            return recipes.map(recipe => {
              return { ...recipe, ingredients: recipe.ingredients ? recipe.ingredients : [] };
            });
          }),
          tap(recipes => {
            this.recipeService.setRecipes(recipes);
          })
        )
    }
}

先谢谢你.

我希望data-storage.service.ts从recipe.service.ts得到更新值.是否有任何单独的对象是由我的任何错误创建的？