无法绑定json数据查看Angularjs2答案

【问题标题】：Cannot bind json data to view Angularjs2无法绑定json数据查看Angularjs2
【发布时间】：2016-10-18 10:15:32
【问题描述】：

我正在尝试将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，我可以在浏览器工具中看到。但是，当我尝试将数据绑定到模板时，出现此错误：

异常：未捕获（承诺中）：错误：./AccountComponent 类 AccountComponent 中的错误 - 内联模板：9:6 导致：self.context.accounts 未定义`。

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

【问题讨论】：

您的服务是否收到 json 响应？在请求中添加console.log(response)

标签： angular angular2-template

【解决方案1】：

在从 Web API 加载数据之前，您必须使用 *ngIf 指令或 Elvis 运算符 (?) 来“保护”您的模板。

*ngIf 指令

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

猫王 (?) 运算符

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

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

【讨论】：

非常感谢。是的，它现在有效。我想知道，每当我们调用 get api 时，我们是否必须在模板中使用 ngIf directive 或 Elvis (?) 运算符，因为通过 api 填充响应时总会有延迟？
@Isuru 还有其他方法可以做到这一点，但通常是这样做的。我想到的第一种方法是在获得响应 Web API 后将 html 从组件动态添加到模板。这可以使用ElementRef 来完成。
好的，我明白了。我将对此进行更多研究。谢谢！

【解决方案2】：

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

通过 API 获取 JSON 数据后会加载路由组件。

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

检查Angular Example - Router 以了解实施情况。

希望有帮助！

【讨论】：