Angular 2:TypeError:l_thing0 在 [{{thing.title}} in AppComponent@4:44] 中未定义 [英] Angular 2: TypeError: l_thing0 is undefined in [{{thing.title}} in AppComponent@4:44]

问题描述

我的应用出现奇怪的错误.它应该从一个对象中打印出 {{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 未定义的错误.

这是 app.component.ts:

import {Component, OnInit} from 'angular2/core';从'./thing'导入{Thing}；从 './thing.service' 导入 {ThingService}；从./subthing.component"导入{SubThingComponent}；@成分({选择器:'东西应用'，模板:`<div class="容器"><div class="row"><div class="col-md-12"><h1>{{thing.title}} <a href="#" (click)="showObj()" class="btn btn-default">显示字符串化对象</a></h1><subthing></subthing>

`，样式:[``]，指令:[SubThingComponent]，提供者:[ThingService]})导出类 AppComponent 实现 OnInit {构造函数(私有_thingService:ThingService){}公共事物:事物；showObj() {//这正确地显示了字符串化的对象警报(JSON.stringify(this.thing))；}得到东西(){this._thingService.getThing().then(thing => this.thing = thing);//这正确记录了对象setTimeout(() => {console.log('thing', this.thing)}, 5000);}ngOnInit() {this.getThing();}}

有什么想法吗?

解决方案

问题是第一次加载页面时，thing 仍未定义，稍后会设置为实际值异步，所以第一次尝试访问该属性时，它会抛出异常.? elvis 运算符是空检查的快捷方式:

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

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?

解决方案

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.

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