Υποενότητα 14.1: Angular και Reactive programming - Πρακτική

Ενημερώστε το menu.component.ts ως εξής για να εγγραφείτε - subscribe στο observable που επιστρέφεται από την υπηρεσία:

ngOnInit() {
  this.dishService.getDishes().subscribe(dishes => this.dishes = dishes);
 }

Έτσι, όταν πηγαίνετε στο component.ts του μενού, θα παρατηρήσετε ότι υπάρχει μια κόκκινη γραμμή κάτω από this.dishes. Αυτό συμβαίνει επειδή τώρα το dishService.getDishes () επιστρέφει observable και όχι μια Dish array. Έτσι, στο  this.dishes = this.dishService.getDishes();  έχετε ένα observable που έχει ανατεθεί σε μια dish array object, το οποίο είναι εσφαλμένο.

Πώς θα επαναρυθμίσουμε αυτόν τον κώδικα;

Εγγράφουμε - subscribe τη  MenuComponent να "παρατηρεί " το Observable. Η menu component είναι τώρα σε θέση να χρησιμοποιήσει τις τιμές Observable που εκπέμπονται από το Observable.

Έχουμε λοιπόν τα dishService.getDishes, και, στη συνέχεια, την μέθοδο εγγραφής που είναι "δεμένη" σε αυτήν. Όταν καλείται η εγγραφή τα dishes θα σας παραδοθούν επειδή η μέθοδος getDishes επιστρέφει το παρατηρήσιμο- observable Observable.of(DISHES) .  Επομένως, αυτό είναι αυτό που χρησιμοποιούμε ως parameter dishes  στην αριστερή πλευρά της arrow function dishes => this.dishes = dishes. Χρησιμοποιούμε την arrow function για να εκχωρήσουμε την παράμετρο στο this.dishes. Το this.dishes είναι η μεταβλητή του menu.component.ts για την οποία έχουμε ήδη δηλώσει τον τύπο της ως  Dish[] και χρησιμοποιείται επίσης στο menu.component.html στον διαρθρωτικό οδηγό * ngFor.