http - Angular 2 (TypeScript) : Unable to bind to object from http. 获取 HTML 模板

Question

费了好大劲才弄清楚为什么会这样。我有一个使用 CLI 设置的 A2 项目，我有以下组件:

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-user-profile-card',
  templateUrl: 'user-profile-card.component.html',
  styleUrls: ['user-profile-card.component.scss']
})
export class UserProfileCardComponent implements OnInit {

  public person;

  constructor(private http: Http) {
  }

  getUserProfile(){
    this.http.get('http://somedomain.com/12345')
        .map(res => res.json())
        .subscribe(
            person => { this.person = person.person },
            err => console.error(err),
            () => console.log(this.person.sex)
        );
  }

  ngOnInit() {
    this.getUserProfile();
  }
}

this.person.sex 的控制台日志显示了正确的值，但是当我尝试从模板绑定(bind)到它时:

<div>{{ person.sex }}</div>

我收到以下错误:

undefined is not an object (evaluating 'self.context.person.sex')

对此有什么想法吗？

Answer 1

那是因为所有 http 调用都是异步操作，并且您试图在数据到达之前在您的模板中显示 person.sex。您可以使用安全导航运算符 (?) 在数据到达之前“保护”您的模板:

<div>
    {{ person?.sex }}
</div>

您还可以使用 ngIf 指令:

<div *ngIf="person">
    {{ person.sex }}
</div>

这样，在填充变量 person 之前，您的 div 不会出现在 DOM 中。您可以阅读更多关于安全导航运营商的信息 here以及更多关于 ngIf 指令的信息 here .