Warum kann ich nicht auf meine angular2 Klasseneigenschaft zugreifen?

Question

Ich bin neu bei Angular 2 und bin in diesem Moment gründlich verwirrt.

Ich lade eine Komponente, die Daten aus Service (im JSON-Format) abruft, und ich bin anscheinend nicht erfolgreich, wenn es darum geht, eine Eigenschaft in meiner Klasse, die ich diese Daten darstellen möchte.

Ich kann aber (mit Debugger) die zurückgegebenen Daten sehen und alert() es. Ich denke, dass ich die Eigenschaft setze, aber die Vorlage meldet einen Fehler, der die Eigenschaft nicht versteht.

Also, ich habe dies:

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 ** 
      }) 
    } 
} 

Die alert() glücklich meldet den korrekten invoiceAccount Wert, mir was darauf hindeutet, dass ich die Daten meiner Eigenschaft site zugewiesen haben.

Allerdings ist die Vorlage nicht überzeugt, und dieser Ausschnitt:

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

sagt mir:

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

Kann mir jemand den Fehler sagen, dass ich bitte mich um?

Danke nette Leute.

Answer 1

Das ist, weil Sie Daten mit HTTP-Aufruf erhalten, die eine asynchrone Operation ist, und Sie versuchen, Daten anzuzeigen, bevor Sie es vom Server abrufen. Grundsätzlich, bevor Ihre site Variable mit Daten gefüllt ist, die Sie von HTTP-Aufruf erhalten, ist es undefined und deshalb erhalten Sie diesen Fehler. Sie können eine sichere Navigation Operator (?) in Ihrer Vorlage zu schützen verwenden, bis die Daten ankommen:

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

Sie auch NgIf Richtlinie verwenden können, dass ein Teil der Vorlage zu machen, erst nachdem Sie sata Variable mit Daten zu füllen:

<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

versuchen, die this.site Eigenschaft früher, zum Beispiel im Konstruktor initialisiert werden wie:

this.site = {} 

Das Problem ist, dass in der Vorlage in der Zeit der Auswertung von site.sitex_invoiceAccount, site ist wirklich undefined. Es passiert früher, dann endet Ihre Subscribe-Methode.