角2：类型错误：l_thing0未定义在[{{thing.title}}在AppComponent @ 4：44] [英] Angular 2: TypeError: l_thing0 is undefined in [{{thing.title}} in AppComponent@4:44]

问题描述

我在我的应用程序得到一个奇怪的错误。它应该打印出 {{} thing.title} 从一个对象，但它显示在控制台中的错误：

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]

我不知道其中 l_thing0 的来源。如果我试图说明 {{}东西} 页面，它显示 [对象的对象] 。如果我尝试 JSON.stringify（this.thing）（请参阅 showObj（）功能），它正确显示字符串化的对象。但是，如果我尝试访问像属性 {{} thing.title} 我得到的错误 l_thing0 是未定义

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.

下面是app.component.ts：

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

任何想法？

推荐答案

的问题是，你第一次加载页面，的事情还是不确定的，它被设置其真正的价值以后asyncronously，所以第一次尝试访问该属性，它会抛出异常。呢？ Elvis操作符是一个快捷方式nullcheck：

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:

{{事情？.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:

＆LT; H1 * ngIf =东西＆GT;

到容器

这篇关于角2：类型错误：l_thing0未定义在[{{thing.title}}在AppComponent @ 4：44]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！