title: Cannot bind json data to view Angularjs2
body: <p>I'm trying to bind <code>json</code> data to template, but I keep getting some exceptions. Here's my code:</p>
  
  <p><strong>account.ts</strong></p>
  
  <pre><code>export interface Account{
      AccountType:string;
      AmountHeld:string;
      AvailableBalance:string;    
  }
  </code></pre>
  
  <p><strong>account.service.ts</strong></p>
  
  <pre><code>import { Injectable, Inject } from '@angular/core';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/map';
  import { Http, Headers, RequestOptions, Response } from '@angular/http';
  import {Account} from '../models/account';
  import { Cookie } from 'ng2-cookies/ng2-cookies';
  
  const URL = "http://payd.azurewebsites.net/api/User/1/account";
  
  const AUTH = Cookie.get('token');
  
  @Injectable()
  export class AccountService {
  
    private accounts;
  
    constructor(private http: Http) {
  
    }
  
    httpGet(): Observable&lt;Account&gt; {
    var headers = new Headers();
    headers.append('Authorization', 'bearer ' + AUTH);
    //headers.append('Content-Type', 'application/x-www-form-urlencoded');
  
    return this.http.get(URL, {
       headers: headers
    }).map((response: Response) =&gt; response.json());
   }
  }
  </code></pre>
  
  <p><strong>account.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {AccountService} from '../services/account.service';
  import { HttpClient } from '../providers/http-client';
  import {Account} from '../models/account';
  
  @Component({
    selector: 'app-account',
    templateUrl: './account.component.html',
    //styleUrls: ['./account.component.css'],
  })
  export class AccountComponent implements OnInit {
  
    private accounts:Account;
    private AccountType;
    private AmountHeld;
    private AvailableBalance;
  
    constructor(private _service:AccountService) {
  
    }
  
    ngOnInit() {    
      this._service.httpGet().subscribe(accounts=&gt;{
        this.accounts=accounts;
      });
    }
  }
  </code></pre>
  
  <p><strong>account.component.html</strong></p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;
      {{accounts.AccountType}}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I successfully get <code>json</code> respose, I can see it in browser tools. But, when I try to bind data to template, I get this error:</p>
  
  <blockquote>
    <p>EXCEPTION: Uncaught (in promise): Error: Error in ./AccountComponent class AccountComponent - inline template:9:6 caused by: self.context.accounts is undefined`.</p>
  </blockquote>
  
  <p>I'm new to Angular 2, any help is appreciated. Thanks in advance!   </p>