how to show api data in html view in Angular 2 get api

Question

I am calling a Get API from angular 2 it Sends the data in this Format bellow.I need to show response data from api in view. and what is the best practice to do this. kindly help me out I will be very thankful to you.

Admin.Component

import { Component } from '@angular/core';
import { ActivatedRoute, ROUTER_DIRECTIVES } from '@angular/router';
import {Http, Headers} from '@angular/http';
import {Observable} from 'rxjs/Rx';


@Component({
  selector: 'about-home',
  templateUrl:'../app/layouts/user.html'

})

export class UserComponent { 

  private _data: Observable<any[]>;

  constructor(public http: Http) {
    this.getAllUser();
  }


getAllUser() {
    return this.http.get('https://localhost:44300/api/apis/GetAllUsers')
    .subscribe(
      data => this._data = data.json(),
      err => this.logError(err),
      () => console.log('User api call')
    );
}

  logError(err: string) {
    console.error('There was an error: ' + err);
  }
}

@Component({
  selector: 'about-item',
  templateUrl:'../app/layouts/product.html'
})
export class ProductComponent { }

@Component({
  selector: 'group',
  templateUrl:'../app/layouts/group.html'
})
export class GroupComponent{}
@Component({
  selector: 'api',
  templateUrl:'../app/layouts/api.html'
})
export class ApiComponent{}

@Component({
    selector: 'app-about',
    templateUrl: '../app/layouts/admin.html',
    directives: [ROUTER_DIRECTIVES]
})
export class AdminComponent { }

Html

 <h1>User View </h1> <p>{{Id}}</p> 

Answer 1

Just check json object using Json Pipe like,

{{_data|json}}  //<---- this is helpful to identify data in order to show it in HTML.

I think this should work,

<p>{{_data[0].Id}}</p>