為什么我不能訪問我的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>