如何在Angular 2中的html视图中显示api数据获取api

Question

我从角度2调用Get API它以此格式发送数据。我需要在视图中显示来自api的响应数据。什么是最好的做法。请帮助我，我将非常感谢你。

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

＆＃13;

＆＃13;

<h1>User View </h1>

<p>{{Id}}</p>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用Json Pipe之类的，

来检查json对象

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

我认为这应该有用，

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