binding data from get parameters angular router

Question

how to get value from parameters in angular routerlink ??

this my code

Component.ts :

Hotels: struct_hotel;
id : struct_hotel['id'] 

constructor(
    private activatedRoute: ActivatedRoute,
    private _service: ResultService)
    {
      this.activatedRoute.queryParams.subscribe(params => {
          let id= params['id'];
          //console.log(id);  
      });
    }
getDetails(id): void {
    this._service.getHotel(this.id).then(Hotels => this.Hotels = Hotels);
}

ngOnInit():void {
    this.getDetails(this.id);
  }

Service :

private apidetail = 'http://localhost/bobobox/public/api/v1/room/show';
getHotel(id: string ): Promise<struct_hotel>
    {
        const url = `${this.apidetail}/${id}`;
        return this.http.get(url)
            .toPromise()
            .then(response => response.json() as struct_hotel[])
            .catch(this.handleError);
    }

and i call it on html like this {{Hotels.hotel_name}} and i got error ERROR TypeError: Cannot read property 'hotel_name' of undefined

can anyone help me ?

Hugo Noro · Accepted Answer · 2018-01-31T08:41:05.750

1

The problem you have here is due to the async call might not be ready before the ngOnInit runs.

You need to put the this.getDetails(this.id); inside the subscribe in the constructor after reading the params

this.activatedRoute.queryParams.subscribe(params => {
      let id= params['id'];
      this.getDetails(this.id);
  });

Also there seems to be some inconsistency on the type of object you are trying to use and the one you are getting from the service.

It seems you are passing an id to get one hotel so the response should be

then(response => response.json() as struct_hotel)

edited Jan 31 '18 at 08:41

answered Jan 31 '18 at 08:30

Hugo Noro

3,145
2
13
19

theres no error in console, but still not binding any data. any help ? – Shaugi Jan 31 '18 at 09:17
OK to rule out possible origins of the problem try to console.log response.json() and see if you get data. – Hugo Noro Jan 31 '18 at 09:44
there's no data.. then what the next step ? – Shaugi Jan 31 '18 at 09:55
Well if there’s no data that’s the origin of your problem. Your API is not returning the data :). You need to check if http get request should be returning data for the id you are passing down. – Hugo Noro Jan 31 '18 at 09:56
im sure my api work correctly or maybe my service is my problem ? this the api link public/api/v1/room/show/{id} theres problem with get parameter to link my api ? – Shaugi Jan 31 '18 at 10:01
One other thing you seem to be requesting an hotel and your service is pointing to a room in the url. Is that correct? – Hugo Noro Jan 31 '18 at 10:03
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/164242/discussion-between-shaugi-muhammad-and-hugo-noro). – Shaugi Jan 31 '18 at 10:07

score 0 · Answer 2 · answered Jan 31 '18 at 08:29

0

Since your request is asynchronous use safe navigation operator while binding

{{Hotels?.hotel_name}}

if Hotels is an array, then you need ngFor as follows,

<tr *ngFor="let dataobj of Hotels">
     {{dataobj ?.hotel_name}}
</tr>

answered Jan 31 '18 at 08:29

Sajeetharan

216,225
63
350
396

score 0 · Answer 3 · answered Jan 31 '18 at 08:31

Well try to console log Hotels, it's probably undefined.

There is a mistake in your code though, you are returning struct_hotel array, and you are Promising struct_hotel (not an array). Which one should it be?

If it's an array, you can't just access it as Hotels.hotel_name, it should be Hotels[i].hotel_name.

score 0 · Answer 4 · answered Jan 31 '18 at 08:36

0

Hotels is undefined at first. You must declare with a new class since you set it to a type of struct_hotel.

Hotels: struct_hotel = new struct_hotel();

After doing this, you may now use properties under that class on your bindings with a default value.

answered Jan 31 '18 at 08:36

Voltaire John Secondes Biton

702
1
9
24

binding data from get parameters angular router

4 Answers4