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

Question

I'm getting a strange error in my app. It's supposed to print out {{thing.title}} from an object, but it shows an error in the console:

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

I'm not sure where l_thing0 is coming from. If I try to show {{thing}}in the page, it displays [object Object]. If I try to JSON.stringify(this.thing) (see the showObj() function), it correctly displays the stringified object. But if I try to access an attribute like {{thing.title}} I get the error that l_thing0 is undefined.

Here is app.component.ts:

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();     } } 

Any ideas?

Answer 1

The issue is that the first time you load the page, thing is still undefined, it gets set to its real value later on asyncronously, so the first time it tries to access the property, it will throw an exception. The ? elvis operator is a shortcut to a nullcheck:

{{thing?.title}}

But its usually a best idea more performant not even try to render the component at all until you have the real object by adding something like:

<h1 *ngIf="thing">

to the container.

Answer 2

though I am coming late to the party but thought this might help for those who're using Angular 5. Strangely noticed the elvis operator will not work in *ngFor loop, but works for *ngif. So here's my code to address the issue.

<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>