Angular2 cannot display the data from http when using route.params

Question

I am learning Angular2 to get data from $http GET request. Right now, the data doesn't show up. I think it's because my service passes the data after my component rendered. I did some search, but still didn't get it. I added two console.log(data) in my code and here is the screenshot of my console.

Here is my ngOnInit() in arr-detail.component.ts:

import { TbArr } from './../../shared/models/tb_arr';
private data: TbArr;
ngOnInit() {
//method 1
  this.route.params
  .switchMap((params: Params) => this._dbService.get('MyAPI.php', 'id=' + params['id']))
  .subscribe((d:TbArr) => this.data = d)
  console.log(this.data);

/**method 2
* this.id = this.route.snapshot.params['id'];
*  this._dbService.get('MyAPI.php', 'id=' + this.id)
*       .subscribe(d => {
*         this.data = d;
*       });
**/
/**method 3
* this.route.params.subscribe(params => {
*   if (params['id']) { //got the id from url
*     this._dbService.get('MyAPI.php', 'id=' + params['id'])
*       .subscribe(d => {
*         this.data = d;
*       });
*   }
* });
**/
}

Here is my GET function in db.service.ts:

get(api: string, options: any) {
    return this.dbRequest('get', api, options);
}
dbRequest(method: string, api: string, options: string) {

    let observable: any;
    const backendUrl_json = 'http://XXX.XX.XX.XX/api/json/';
    observable = this.http[method](backendUrl_json + api, {search: options});
    observable = observable.map(res => res.json());
    console.log(method, backendUrl_update + api, options);
    observable.subscribe(
                d => { console.log(d); },
                e => { console.log(e); }
            );
    return observable;
}

Here is my component html file:

<table *ngIf="data">
  <tbody>
    <tr>
      <td>ID:</td>
      <td>{{data?.id | async}}</td>
    </tr>
    <tr>
      <td>Date:</td>
      <td>{{data?.date | async}}</td>
    </tr>
   </tbody>
 </table>

Here is my tb_arr which has TbArr interface:

export interface TbArr {
   id:number;
   date:any;
}

UPDATE MY QUESTION: The table is showed up on web page, but no data showed.
When I opened the "Object" in the console, I got this:

Does anyone have any idea about this? Thank you very much. If you need more information, please leave me a comment.

Answer 1

You can see from your console.log that you are dealing with an object that is in an array. If you are always just receiving one object inside the array, extract it from the array.... Either you extract the object from the array when you subscribe, or you need to access it in your template appropriately, meaning:

{{data[0].id}}

Here I choose to extract the object in the subscription:

 this.route.params
  .switchMap((params: Params) => this._dbService.get('MyAPI.php', 'id=' + params['id']))
  .subscribe(data => {
    this.data = data[0]; // extract the object
    console.log(this.data);
  })

Now you can access the properties of the object in your template:

<table>
  <tbody>
    <tr>
      <td>ID:</td>
      <td>{{data?.id}}</td>
    </tr>
    <tr>
      <td>Date:</td>
      <td>{{data?.date}}</td>
    </tr>
   </tbody>
 </table>