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>

告诉我：

EXCEPTION：未捕获（承诺）：错误：导致http://localhost:3000/app/site-detail.component.html:5:52错误：无法读取属性＆＃39; sitex_invoiceAccount＆＃39;未定义的 TypeError：无法读取属性＆＃39; sitex_invoiceAccount＆＃39;未定义的

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

谢天谢地。

Answer 1

尝试先前初始化this.site属性，例如在构造函数中：

this.site = {}

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

Answer 2

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

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

只有在使用数据填充NgIf变量后，您才可以使用sata指令渲染模板的该部分：

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

为什么我无法访问我的angular2类属性

2 个答案: