I am currently learning Angular 5 on Coursera and facing an issue with the Promise concept. I followed the code from my instructor but encountered an error TS2322 while working on my service file.
import { Injectable } from '@angular/core';
import { Dish } from '../shared/dish'; //this is a class
import { DISHES } from '../shared/dishes'; //these are constants
@Injectable()
export class DishService {
getDishes(): Promise<Dish[]> {
return Promise.resolve(DISHES);
}
getDish(id: number): Promise<Dish> {
return Promise.resolve(DISHES.filter((dish) => (dish.id === id))[0]);
}
getFeaturedDish(): Promise<Dish> {
return Promise.resolve(DISHES.filter((dish) => dish.featured)[0]);
}
Here is how the component utilizes the service:
import { Component, OnInit } from '@angular/core';
import { Dish } from '../shared/dish';
import { DishService } from '../services/dish.service';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {
dishes: Dish[];
selectedDish: Dish;
onSelect(dish: Dish) {
this.selectedDish = dish;
}
constructor(private dishService: DishService) { }
ngOnInit() {
this.dishes = this.dishService.getDishes()
.then(dishes => this.dishes = dishes);
}
}
However, I am encountering the following errors:
ERROR in src/app/dishdetail/dishdetail.component.ts(26,4): error TS2322: Type 'Promise' is not assignable to type 'Dish'. Property 'id' is missing in type 'Promise'. src/app/home/home.component.ts(28,5): error TS2322: Type 'Promise' is not assignable to type 'Dish'. src/app/menu/menu.component.ts(23,4): error TS2322: Type 'Promise' is not assignable to type 'Dish[]'. Property 'includes' is missing in type 'Promise'.
I suspect there might be an issue with my service implementation, but I'm unable to find relevant resources to guide me. Could someone please explain what could be going wrong?