无法绑定 json 数据以查看 Angularjs2

Question

我正在尝试将 json 数据绑定到模板，但我不断收到一些异常。这是我的代码：

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>

我成功获得了jsonrespose，我可以在浏览器工具中看到它。但是，当我尝试将数据绑定到模板时，出现此错误：

EXCEPTION: Uncaught (in promise): Error: Error in ./AccountComponent class AccountComponent - inline template:9:6 caused by: self.context.accounts is undefined`.

我是 Angular 2 的新手，感谢您的帮助。提前致谢！

Answer 1

您必须使用 *ngIf 指令或 Elvis 运算符 (?) "protect" 您的模板，直到从网络加载数据 API。

*ngIf 指令

<ul *ngIf="accounts">
  <li>
      {{accounts.AccountType}}
  </li>
</ul>

猫王 (?) 运算符

<ul>
  <li>
      {{accounts?.AccountType}}
  </li>
</ul>

您收到当前错误是因为您试图显示 accounts.AccountType 而 accounts 变量为 undefined（尚未从网络 API 接收数据）。

Answer 2

您可以使用 resolve 属性的 RouterModule 新 @angular/router": "3.0.0" 包。

通过API获得JSON数据后，将加载路由组件。

{ 
  path: ':id',
  component: CrisisDetailComponent,
  resolve: {
     crisis: CrisisDetailResolve
  }
}

检查 Angular Example - Router 实施。

希望对您有所帮助！

无法绑定 json 数据以查看 Angularjs2

Cannot bind json data to view Angularjs2

angular2-template

angular