Υποενότητα 14.3: Angular HTTP Client - Πρακτική

Ενημέρωση της Menu Component

Ανοίξτε το menu.component.ts και ενημερώστε το ως εξής:

import { Component, OnInit, Inject } from '@angular/core';
...
 constructor(private dishService: DishService,
 @Inject('BaseURL') public BaseURL) { }
...

MenuComponent, εισάγει το DishService και καλεί τη μέθοδο  getDishes ().

Ανοίξτε το menu.component.html και ενημερώστε το ως εξής:

src="{{BaseURL + dish.image}}"

Τώρα ο λόγος για τον οποίο εγχύσαμε το BaseURL μέσα στη συνιστώσα είναι ότι, στο πρότυπο, παίρνουμε το dish.image. Αυτό το dish.image πρέπει να ληφθεί από το json-server. Επομένως, πρέπει να ενημερώσουμε την πηγή να είναι BaseURL + dish.image. Προκειμένου αυτό να λειτουργήσει σωστά, πρέπει να περικλείσουμε το src μέσα σε εισαγωγικά.