javascript - Angular 2: TypeError: l_thing0 is undefined in [{{thing.title}} in AppComponent@4:44] -
i'm getting strange error in app. it's supposed print out {{thing.title}} object, shows error in console:
exception: typeerror: l_thing0 undefined in [{{thing.title}} in appcomponent@4:44] i'm not sure l_thing0 coming from. if try show {{thing}}in page, displays [object object]. if try json.stringify(this.thing) (see showobj() function), correctly displays stringified object. if try access attribute {{thing.title}} error l_thing0 undefined.
here app.component.ts:
import {component, oninit} 'angular2/core'; import {thing} './thing'; import {thingservice} './thing.service'; import {subthingcomponent} "./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() { // correctly shows stringified object alert(json.stringify(this.thing)); } getthing() { this._thingservice.getthing().then(thing => this.thing = thing); // correctly logs object settimeout(() => {console.log('thing', this.thing)}, 5000); } ngoninit() { this.getthing(); } } any ideas?
the issue first time load page, thing still undefined, gets set real value later on asyncronously, first time tries access property, throw exception. ? elvis operator shortcut nullcheck:
{{thing?.title}}
but best idea more performant not try render component @ until have real object adding like:
<h1 *ngif="thing">
to container.
Comments
Post a Comment