Почему я не могу получить доступ к свойству класса 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> 

говорит мне:

EXCEPTION: Uncaught (in promise): Error: Error in http://localhost:3000/app/site-detail.component.html:5:52 caused by: Cannot read property 'sitex_invoiceAccount' of undefined TypeError: Cannot read property 'sitex_invoiceAccount' of undefined

Может кто-нибудь сказать мне ошибку, что я совершаю, пожалуйста?

спасибо добрые люди.

Answer 1

Это потому, что вы получаете данные, используя 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> 

Answer 2

Try для инициализации this.site свойство ранее, например, в конструкторе, как:

this.site = {} 

Проблема в том, что во время оценки site.sitex_invoiceAccount в шаблоне, site действительно undefined. Это происходит раньше, затем заканчивается ваш метод подписки.