Currently, I am stuck on an Angular tutorial that includes some code, but unfortunately, I am encountering an error that I haven't been able to troubleshoot. In all instances within my code where dish or getDish are present, they are stored as strings. Even though the string contains a number, it is consistently treated as a string.
I have attempted to retrace my steps through the tutorial and compared all the instructions with the versions I have uploaded to Github. As I am relatively new to Angular, it is possible that the tutorial could be referring to a different version?
The error message reads:
Error: src/app/dishdetail/dishdetail.component.ts:23:42 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
23 this.dish = this.dishservice.getDish(id);
~~
dishdetail.component.ts
import { Component, OnInit } from '@angular/core';
import { Dish } from '../shared/dish';
import { DishService } from '../services/dish.service';
import { Params, ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
@Component({
selector: 'app-dishdetail',
templateUrl: './dishdetail.component.html',
styleUrls: ['./dishdetail.component.scss']
})
export class DishdetailComponent implements OnInit {
dish: Dish;
constructor(private dishservice: DishService,
private route: ActivatedRoute,
private location: Location) { }
ngOnInit() {
const id = +this.route.snapshot.params['id'];
this.dish = this.dishservice.getDish(id);
}
goBack(): void {
this.location.back();
}
}
dish.service.ts
import { Injectable } from '@angular/core';
import { Dish } from '../shared/dish';
import { DISHES } from '../shared/dishes';
@Injectable({
providedIn: 'root'
})
export class DishService {
constructor() { }
getDishes(): Dish[] {
return DISHES;
}
getDish(id: string): Dish {
return DISHES.filter((dish) => (dish.id === id))[0];
}
getFeaturedDish(): Dish {
return DISHES.filter((dish) => dish.featured)[0];
}
}
menu.component.ts
import { Component, OnInit } from '@angular/core';
import { Dish } from '../shared/dish';
import { DISHES } from '../shared/dishes';
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[] = DISHES;
selectedDish: Dish;
constructor(private dishService: DishService) { }
ngOnInit() {
this.dishes = this.dishService.getDishes();
}
onSelect(dish: Dish) {
this.selectedDish = dish;
}
}
If additional files are required, please let me know and I can provide them.