为什么我不能访问我的angular2类属性

Question

我是Angular 2的新手，此刻完全感到困惑。

我正在加载一个组件，该组件从服务（JSON格式）中检索数据，并且在我要表示该数据的类中设置属性时，我显然不成功。

但是，我可以（使用调试器）查看返回的数据并对其进行alert() 。 我认为我正在设置属性，但是模板报告了一个错误，它不了解该属性。

所以，我有这个：

import { Response } from '@angular/http';
import { Location } from '@angular/common';
import { ActivatedRoute, Params } from '@angular/router';
import { Component, Input, OnInit } from '@angular/core';
import 'rxjs/add/operator/switchMap';
import { SiteService } from './site.service';
import { Site } from './site';

@Component({
    moduleId: module.id,
    selector: 'site-detail',
    templateUrl: 'site-detail.component.html'
})
export class SiteDetailComponent implements OnInit {

    public site: Site;  // **Site is an interface**

    constructor(
        private siteService: SiteService,
        private route: ActivatedRoute,
        private location: Location
    ) { }

    // getSite(): void {
    ngOnInit(): void {
        this.route.params
            .switchMap((params: Params) => this.siteService.getSite(params['id']))
            .subscribe((data: Response) => {
                this.site = data[0];
                alert(this.site.sitex_invoiceAccount); ** ALL LOOKS GOOD AT THIS POINT **
            })
    }
}

alert()愉快地报告了正确的invoiceAccount值，向我暗示我已将数据分配给了我的财产site 。

但是，该模板和以下代码段不适用：

 <div class="form-group">
    <label for="xxxx">Site ID</label>
    <input type="text" class="form-control" [value]="site.sitex_invoiceAccount">
 </div>

告诉我：

例外：未捕获（承诺）：错误： http：// localhost：3000 / app / site-detail.component.html：5：52中的错误，原因是：无法读取未定义Type的属性'sitex_invoiceAccount'错误：无法读取属性' sitex_invoiceAccount'未定义

有人可以告诉我我犯的错误吗？

谢谢你的好心人。

Answer 1

尝试更早地初始化this.site属性，例如在类似以下的构造函数中：

this.site = {}

问题是，在评估模板中的site.sitex_invoiceAccount时， site确实undefined 。 它发生得更早，然后您的订阅方法完成。

Answer 2

这是因为您正在使用HTTP调用（这是一个异步操作）获取数据，并且试图在从服务器获取数据之前显示数据。 基本上，在用HTTP调用获取的数据填充您的site变量之前，它是undefined ，因此这就是您收到此错误的原因。 您可以在模板中使用安全的导航运算符（ ? ）保护它，直到数据到达为止：

<div class="form-group">
    <label for="xxxx">Site ID</label>
    <input type="text" class="form-control" [value]="site?.sitex_invoiceAccount">
</div>

您还可以仅在用数据填充sata变量后使用NgIf指令来呈现模板的该部分：

<div *ngIf="site" class="form-group">
    <label for="xxxx">Site ID</label>
    <input type="text" class="form-control" [value]="site.sitex_invoiceAccount">
</div>