http.get() से लोड JSON डेटा मेरे कोणीय 2 टेम्पलेट

Question

में अपरिभाषित है, मैं एक स्थानीय जेसन फ़ाइल पढ़ने की कोशिश कर रहा हूं और इसे उस वर्ग में पार्स कर रहा हूं जिसे मैंने वही गुण दिया है। जब मैं कक्षा से पढ़ने की कोशिश करता हूं, तो यह मुझे त्रुटियों देता है कि कक्षा शून्य या अपरिभाषित है।

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[]) { 
    } 
} 

यह item.ts का उपयोग करता है:

मैं एक फ़ाइल hall.ts जो इस तरह दिखता है

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 फ़ाइल, hall1.json, कि मैं इस तरह दिखता है से पढ़ने के लिए कोशिश कर रहा हूँ:

{ 
    "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 का उपयोग कर रहा हूं एच जेएसओ फ़ाइल को पढ़ने की कोशिश करता है जो स्थानीय रूप से संग्रहीत है, और इसे Hall ऑब्जेक्ट में लौटाता है। ऐसा करने के लिए कि methode है:

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

मैं अपने 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; 
     }) 
    } 
} 

में इस पद्धति का उपयोग अब तक यह मुझे किसी भी त्रुटि नहीं देता है, लेकिन जब मैं hall वस्तु से पढ़ने की कोशिश , यह sais है कि यह अपरिभाषित है

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

त्रुटि:

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

Answer 1

आपको याद रखना होगा कि http.get() कॉल async है। आपका टेम्पलेट आपके एसिंक http कॉल द्वारा हल किए जाने से पहले किसी ऑब्जेक्ट के रूप में hall को संसाधित करने का प्रयास कर रहा है।

यही कारण है कि hall अनिर्धारित है और इसलिए, आप इस पर किसी भी गुण का उपयोग नहीं कर सकते (यह अभी तक मौजूद नहीं है)।

एरिक टिप्पणी में उल्लेख किया है, अपने टेम्पलेट के लिए कुछ इस तरह का प्रयास करें:

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

कि hall अशक्त सुरक्षित पर naam के संदर्भ में कर देगा।

अद्यतन:

पूर्णता के लिए के लिए, मैं आपको बताएंगे कि आप वास्तव में * ngIf इस के लिए भी उपयोग कर सकते हैं, हालांकि अशक्त सुरक्षित जांच एक क्लीनर की तलाश में टेम्पलेट के लिए बनाता है।

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