Angular 2 Web API调用Get

Question

我从角度2调用Get API它以此格式发送数据。我需要从此结果中显示图片（大）我该怎么做。

图像获取请求响应

这是我的Admin.component.ts类代码

组件

import {Component} from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS,RouteDefinition, Router} from '@angular/router-deprecated';
import {LoginComponent} from '../components/login.component';
import {Observable} from 'rxjs/Rx';

import {Http, Headers} from '@angular/http';
@Component({
    templateUrl:'../../app/layouts/admin.html',
    selector:'Admin',
    directives: [ROUTER_DIRECTIVES]
})


export class AdminComponent {
randomQuote: string;
private _data: Observable<any[]>;



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


getRandomQuote() {
  this.http.get('https://randomuser.me/api/')
    .subscribe(
      data => this._data = data.json(),
      err => this.logError(err),
      () => console.log('User api call')
    );
}

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

这是我的admin.html代码

HTML

<Admin>
<div class="row">
    <div class="col-md-2" style="padding-top:2em; background-color:#DCDCDC;">
        <div class="text-center">
            <img src="data?.results[0].picture.large" class="img-circle" alt="pic" /><br />
            <a href="#">Logout</a>
        </div>
        <ul class="nav nav-sidebar">
            <li> <a [routerLink]="['Hello']">Users</a></li>
            <li><a >Groups</a></li>
            <li><a >Products</a></li>
            <li><a >APIs</a></li>
        </ul>
    </div>

    <div class="col-md-10">
        <div class="page-header ">
            <h1>
                Admin Portal
            </h1>
        </div>

        <div class="content padding has-header">
            <router-outlet>

            </router-outlet>
        </div>
    </div>
</div>
</Admin>

Answer 1

this.http.get(...).subscribe(data => this.data = data.json());

<img [src]="data?.results[0].picture.large">