Activatedroute does not call the service before updating angular page 5

Question

Hello, I used the routerLink that passes an id to the url, which looks for this id and step as parameter for the function that searches the data of the api, but when I click on my link it redirects to the route I want, but it does not show my data that I am iterating, and the api return array is Undefined. But if I reload the route again then yes it shows the data:

This is my link

<a routerLink="/wines/{{uvas.id_uva}}">{{uvas.uva}}</a></li>

My Component

ngOnInit() {

this.Wine = this.route.paramMap.pipe(
switchMap((params: ParamMap) =>
  this._dataService.getWine(params.get('id'))

  );
}

My Service

getWine(id): Observable<IWine> {
return this.http.get<IWine>(`http://localhost:8888/exemplo/${id}`);
}

Answer 1

The value will only exist within sbuscribe because it has the http return and equivalent to Promise.then..

ngOnInit() {
 this.activatedRoute.params.map(params => params['id'])
.switchMap(id => id ? this.dataService.getWine(id) : Observable.empty())
.subscribe(wines=>   this.Wines = wines);

}

If you have more questions search for asyncornicity. More specifically async pipe at the angle