After receiving an id number from the parent component, I pass it to my child component in order to retrieve a value with multiple properties. To achieve this, I created a service that returns an observable containing the desired object. However, when attempting to display the id of this observable in my HTML, I encountered an error stating TS2339: Property 'id' does not exist on type 'Observable'.
Here is my HTML code:
<h2>{{dog$.id}}</h2>And here is the code for the component:
dog$!: Observable<Dog>;
ngOnInit() {
this.dog$ = this.route.paramMap.pipe(
switchMap((params: ParamMap) =>
this.service.getDog(params.get('id')!))
);
}
Finally, the service code is as follows:
getDog(id: number | string): Observable<Dog> {
const dog = DOGS.find(result => result.id === id)!;
return of(dog);
}
If anyone could assist me with resolving this issue, I would greatly appreciate it.