कोणीय 2: TypeError: l_thing0 AppComponent @ 4: 44]

Question

में [{{thing.title}} में अपरिभाषित है मुझे अपने ऐप में एक अजीब त्रुटि मिल रही है। यह एक वस्तु से बाहर {{thing.title}} मुद्रित करने के लिए माना जाता है, लेकिन यह कंसोल में एक त्रुटि दिखाता है:

EXCEPTION: TypeError: l_thing0 is undefined in [{{thing.title}} in AppComponent@4:44] 

मुझे यकीन है कि जहां l_thing0 से आ रहा है नहीं कर रहा हूँ। यदि मैं पृष्ठ में {{thing}} दिखाने का प्रयास करता हूं, तो यह [object Object] प्रदर्शित करता है। अगर मैं JSON.stringify(this.thing) (showObj() फ़ंक्शन देखें) का प्रयास करता हूं, तो यह सही ढंग से स्ट्रिंग किए गए ऑब्जेक्ट को प्रदर्शित करता है। लेकिन अगर मैं {{thing.title}} जैसी विशेषता तक पहुंचने का प्रयास करता हूं तो मुझे त्रुटि मिलती है कि l_thing0 अपरिभाषित है।

import {Component, OnInit} from 'angular2/core'; 
import {Thing} from './thing'; 
import {ThingService} from './thing.service'; 
import {SubThingComponent} from "./subthing.component"; 

@Component({ 
    selector: 'thing-app', 
    template: ` 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <h1>{{thing.title}} <a href="#" (click)="showObj()" class="btn btn-default">Show Stringified Obj</a></h1> 
        <subthing></subthing> 
       </div> 
      </div> 
     </div> 
    `, 
    styles:[` 

    `], 
    directives: [SubThingComponent], 
    providers: [ThingService] 
}) 

export class AppComponent implements OnInit { 

    constructor(private _thingService: ThingService) { } 

    public thing: Thing; 

    showObj() { 
     // This correctly shows the stringified object 
     alert(JSON.stringify(this.thing)); 
    } 

    getThing() { 
     this._thingService.getThing().then(thing => this.thing = thing); 
     // This correctly logs the object 
     setTimeout(() => {console.log('thing', this.thing)}, 5000); 
    } 

    ngOnInit() { 
     this.getThing(); 
    } 
} 

कोई भी विचार:

यहाँ app.component.ts है?

Answer 1

समस्या यह है कि पहली बार जब आप पृष्ठ लोड करते हैं, thing अभी भी अनिर्धारित है, तो यह बाद में अपने वास्तविक मूल्य पर असीमित रूप से सेट हो जाता है, इसलिए पहली बार यह संपत्ति तक पहुंचने का प्रयास करता है, यह अपवाद फेंक देगा। ? एल्विस ऑपरेटर एक nullcheck के लिए एक शॉर्टकट है:

{{thing?.title}}

लेकिन इसकी आम तौर पर एक सबसे अच्छा विचार अधिक performant भी तरह कुछ जोड़कर बिल्कुल जब तक आप वास्तविक वस्तु है घटक रेंडर करने के लिए कोशिश नहीं की:

<h1 *ngIf="thing">

कंटेनर में।

Answer 2

तुम भी सर्वर या async समारोह से डेटा प्राप्त करने से पहले और डेटा true के लिए सेट प्राप्त करने के बाद false के लिए एक नया चर isFinished सेट कर सकते हैं। फिर isFinished*ngIf में परिवर्तनीय यह जांचने के लिए कि सर्वर/फ़ंक्शन प्रक्रिया पूरी की गई है या नहीं?

Answer 3

हालांकि मैं पार्टी के लिए देर से आ रहा हूं लेकिन सोचा कि यह उन लोगों के लिए मदद कर सकता है जो कोणीय 5 का उपयोग कर रहे हैं। आश्चर्यजनक रूप से देखा गया है कि एल्विस ऑपरेटर * ngFor लूप में काम नहीं करेगा, लेकिन * ngif के लिए काम करता है। तो इस मुद्दे को हल करने के लिए मेरा कोड यहां है।

<div *ngIf = "fullObject?.objProperty"> 
     <h1>{{fullObject.objProperty1}}</h1> 
     <div *ngFor = "let o of fullObject.objPropertyArray"> 
      <h3>{{o._subheader}}</h3> 
      <p> 
       {{o._subtext}} 
      </p> 
     </div> 
    </div> 
</div>