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?