http.get() öğesinden yüklenen JSON verileri Angular 2 şablonumda tanımlanmamış

Question

Yerel bir json dosyasını okumaya ve aynı özelliklere sahip olan bir sınıfa ayrıştırmaya çalışıyorum. Sınıftan okumaya çalıştığımda, sınıfın boş ya da tanımsız olduğunu söyleyen hatalar veriyor.

import {Item} from '../item/item'; 
export class Hall { 
    constructor(public id:number, 
       public naam:string, 
       public oppervlakte:number, 
       public aantalItems:number, 
       public itemsMetNodigeActie:number, 
       public items:Item[]) { 
    } 
} 

O item.ts kullanır:

Şöyle bir dosya hall.ts var

export class Item { 
    constructor(public categorie:string, 
       public naam:string, 
       public productnummer:string, 
       public omschrijving:string, 
       public laatsteUitgevoerdeActie:Actie, 
       public eerstVolgendeActie:Actie) { 
    } 
} 
export class Actie{ 
    constructor(datum: string, 
       type: string, 
       omschrijving: string){} 
} 

json dosyası, hall1.json, ben böyle görünüyor okumaya çalışıyorum o:

{ 
    "id": 1, 
    "naam": "hall1", 
    "oppervlakte": 100, 
    "aantalItems": 3, 
    "itemsMetNodigeActie": 3, 
    "items": [ 
    { 
     "id": 1, 
     "categorie": "machine", 
     "productnummer": "ADE124e", 
     "omschrijving": "print papieren af", 
     "laatsteUitgevoerdeActie": { 
     "datum": "2015-01-05T00:00:00.000Z", 
     "type": "vervanging", 
     "omschrijving": "papier vervangen" 
     }, 
     "eerstVolgendeActie": { 
     "datum": "2016-01-06T00:00:00.000Z", 
     "type": "vervanging", 
     "omschrijving": "inkt vervangen" 
     } 
    } 
    ] 
} 

hall.service.ts kullanıyorum h, yerel olarak depolanan json dosyasını okumaya çalışır ve Hall nesnesinde döndürür. Bu Bunu yaptığın için Methode geçerli:

public getHall(): Observable<Hall> { 
    return this.http.get('app/hall/hall1.json') 
     .map((res:Response) => res.json()); 
} 

Ben Şimdiye kadar bana herhangi bir hata vermez benim hallDetail.component.ts

export class HallDetailComponent implements OnInit{ 
    public hall: Hall; 
    constructor(
     private service: HallService 
    ){} 
    ngOnInit(){ 
     this.service.getHall().subscribe((hall:Hall) => { 
      this.hall = hall; 
     }) 
    } 
} 

bu yöntemi kullanmak, ama hall nesneden okumaya çalıştığınızda , buna tanımsız olduğunu sais

@Component({ 
    template: ` 
    <div> 
    {{hall.naam}} 
    </div> 
    ` 
}) 

Hata:

EXCEPTION: TypeError: Cannot read property 'naam' of undefined in [ 
    {{hall.naam}} 
    in HallDetailComponent@1:7] 

Answer 1

http.get() aramasının async olduğunu hatırlamak zorundasınız. Şablonunuz, async http çağrınız tarafından çözülmeden önce hall nesnesini bir nesne olarak işlemeye çalışıyor.

Bu nedenle, hall tanımsızdır ve bu nedenle, üzerinde herhangi bir özelliğe erişemezsiniz (henüz mevcut değildir). Eric yorumunda belirtildiği gibi

, şablonunuz için böyle bir şey deneyin: Güvenli hall boş üzerinde naam atıfta yapacak

@Component({ 
    template: ` 
    <div> 
    {{hall?.naam}} <!-- note the added ? --> 
    </div> 
    ` 
}) 

.

Güncelleme: Bütünlük adına

, ben boş kasa çek daha temiz görünümlü şablon için yapar gerçi aslında yanı bunun için * ngIf kullanabileceği değineceğiz.

@Component({ 
    template: ` 
    <div *ngIf="hall"> <!-- note the added *ngIf --> 
    {{hall.naam}} 
    </div> 
    ` 
})