typescript Angular 2：TypeError：l_thing0 在 [{{thing.title}} in AppComponent@4:44] 中未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34833358/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2: TypeError: l_thing0 is undefined in [{{thing.title}} in AppComponent@4:44]
提问by Josh
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:
我的应用程序中出现一个奇怪的错误。它应该{{thing.title}}从一个对象打印出来，但它在控制台中显示一个错误：
EXCEPTION: TypeError: l_thing0 is undefined in [{{thing.title}} in AppComponent@4:44]
I'm not sure where l_thing0is 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_thing0is undefined.
我不确定l_thing0来自哪里。如果我尝试{{thing}}在页面中显示，它会显示[object Object]. 如果我尝试JSON.stringify(this.thing)（查看showObj()函数），它会正确显示字符串化对象。但是，如果我尝试访问一个属性，就像{{thing.title}}我收到l_thing0未定义的错误一样。
Here is app.component.ts:
这是 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?
有任何想法吗？
回答by Langley
The issue is that the first time you load the page, thingis 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仍然未定义，稍后异步地将其设置为其实际值，因此第一次尝试访问该属性时，它会抛出异常。该?Elvis操作符是一个快捷方式nullcheck：
{{thing?.title}}
{{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">
<h1 *ngIf="thing">
to the container.
到容器。
回答by sagars01
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.
虽然我迟到了，但我认为这可能对那些使用 Angular 5 的人有所帮助。奇怪地注意到 elvis 操作符在 *ngFor 循环中不起作用，但适用于 *ngif。所以这是我的代码来解决这个问题。
<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>
回答by connectedMind
I am using Angular 8 and although the data is shown, I also had this error and googling it brought me to this question. The accepted answer (though well explained) did not solve it for me. (Maybe because of a newer version, or the use with *ngFor) It does not suffice to just use *ngIf, as you can see:
我正在使用 Angular 8，虽然显示了数据，但我也遇到了这个错误，谷歌搜索让我想到了这个问题。接受的答案（尽管解释得很好）并没有为我解决它。（可能是因为版本较新，或者与 *ngFor 一起使用）仅使用 *ngIf 是不够的，如您所见：
throws error: v1
抛出错误：v1
<div class="row">
<pre>
<li *ngFor="let obj of object.content">{{obj | json}}</li>
</pre>
</div>
throws error: v2
抛出错误：v2
<div class="row" *ngIf="object.content">
<pre>
<li *ngFor="let obj of object.content">{{obj | json}}</li>
</pre>
</div>
throws error: v3
抛出错误：v3
<div class="row" *ngIf="object.content">
<pre>
<li *ngFor="let obj of object?.content">{{obj | json}}</li>
</pre>
</div>
no error: v1
没有错误：v1
<div class="row">
<pre>
<li *ngFor="let obj of object?.content">{{obj | json}}</li>
</pre>
</div>
no error: v2
没有错误：v2
<div class="row" *ngIf="object?.content">
<pre>
<li *ngFor="let obj of object.content">{{obj | json}}</li>
</pre>
</div>
no error: v3
没有错误：v3
<div class="row" *ngIf="object?.content">
<pre>
<li *ngFor="let obj of object?.content">{{obj | json}}</li>
</pre>
</div>
回答by Reza Neghabi
You could also set a new variable isFinishedto falsebefore retrieving data from server or async function and after receiving the data set it to true. Then put isFinishedvariable in *ngIfto check if server/function process is done?
您还isFinished可以false在从服务器或异步函数检索数据之前以及在接收数据之后将新变量设置为true. 然后放入isFinished变量*ngIf以检查服务器/功能进程是否完成？
