I'm currently following an Angular tutorial and encountering some issues.
Problem #1: The problem arises when using two services, recipe.service.ts (handles local data manipulation) and data-storage.service.ts (stores data in Firebase). When the getRecipes() method is called from data-storage.service.ts, only the default values are returned instead of the updated ones.
For better clarification, refer to the image: Browser Dev Tools Console. The point where the Save Data button is clicked is highlighted in red in the above image.
Problem #2: The instructor uses this.recipes.slice() without any parameter to fetch data. However, if I use it, the newly added or deleted values are not reflected. To view the changes, I used this.recipes.slice(0,this.recipes.length). My question is, if the length changes, what is the correct way to reflect it?
Contents of 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 do 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);
}
// More methods...
}
contents of 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);
// Code for storing recipes
}
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);
})
)
}
}
Thank you in advance.
I expected data-storage.service.ts to retrieve the updated values from recipe.service.ts. Am I creating a separate object by mistake somewhere?