I'm trying to bind json
data to template, but I keep getting some exceptions. Here's my code:
account.ts
export interface Account{
AccountType:string;
AmountHeld:string;
AvailableBalance:string;
}
account.service.ts
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<Account> {
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) => response.json());
}
}
account.component.ts
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=>{
this.accounts=accounts;
});
}
}
account.component.html
<ul>
<li>
{{accounts.AccountType}}
</li>
</ul>
I successfully get json
respose, I can see it in browser tools. But, when I try to bind data to template, I get this error:
EXCEPTION: Uncaught (in promise): Error: Error in ./AccountComponent class AccountComponent - inline template:9:6 caused by: self.context.accounts is undefined`.
I'm new to Angular 2, any help is appreciated. Thanks in advance!