I am calling a Get API from angular 2 it Sends the data in this Format bellow.I need to show picture(large) from this result how can i Do this.

image Get Request Response

here is my Admin.component.ts class code

Component

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);
  }
}

here is my admin.html code

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>