Angular 2：TypeError：l_thing0 在 AppComponent@4:44 的 [thing.title 中未定义]

Posted 2023-03-13

【中文标题】Angular 2：TypeError：l_thing0 在 AppComponent@4:44 的 [thing.title 中未定义]

【英文标题】：Angular 2: TypeError: l_thing0 is undefined in [thing.title in AppComponent@4:44]Angular 2：TypeError：l_thing0 在 AppComponent@4:44 的 [thing.title 中未定义]

【发布时间】：2016-04-22 08:42:14

【问题描述】：

我的应用程序出现了一个奇怪的错误。它应该从对象中打印出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';
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();
    

有什么想法吗？

【问题讨论】：

这thing?.title 是否使错误消失？

好的，谢谢。我只是想通了。 （7小时后。：/）

np，尽量不要习惯那个操作符，我发布了一个更好的解决方案。

【参考方案1】：

问题在于，第一次加载页面时，thing 仍然未定义，稍后它会异步设置为其实际值，因此当它第一次尝试访问该属性时，它会抛出异常。 ? elvis 运算符是 nullcheck 的快捷方式：

thing?.title

但通常最好的想法是提高性能，甚至在你拥有真实对象之前根本不尝试渲染组件，添加如下内容：

<h1 *ngIf="thing">

到容器。

【讨论】：

所以你的意思是我们必须使用*ngIf 而不是? 对吗？

此解决方案有效，但您将如何避免在加载值时导致的 DOM jigger？有没有一种优雅的方法可以在标签中添加一些文本，例如“正在加载”，并在值加载后换出？

对不起，我直到现在才看到你的消息。这是完全独立的，如果您有异步加载的数据，无论是否进行空检查，都会发生这种情况。对于某些设计师来说，这没问题，您应该在获得数据时加载和显示数据。就个人而言，我讨厌这种闪烁，我更喜欢在信息准备好后加载整个页面。我发现避免这种情况的最好方法以及我使用的方法是路由器上的解析功能，如 ui-router，这些将推迟启动组件，直到模型被所有注册的解析加载。

【参考方案2】：

虽然我迟到了，但我认为这可能对那些使用 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>

【讨论】：

将其报告为错误

【参考方案3】：

您还可以在从服务器或异步函数检索数据之前以及在接收到数据之后将其设置为true，将新变量isFinished 设置为false。然后将isFinished 变量放入*ngIf 以检查服务器/函数进程是否完成？

【参考方案4】：

我使用的是 Angular 8，虽然显示了数据，但我也遇到了这个错误，谷歌搜索它让我想到了这个问题。接受的答案（尽管解释得很好）并没有为我解决。 （可能是因为版本较新，或者与 *ngFor 一起使用） 如您所见，仅使用 *ngIf 是不够的：

抛出错误：v1

  <div class="row">
    <pre>
      <li *ngFor="let obj of object.content">obj | json</li>
    </pre>
  </div>

抛出错误：v2

  <div class="row" *ngIf="object.content">
    <pre>
      <li *ngFor="let obj of object.content">obj | json</li>
    </pre>
  </div>

抛出错误：v3

  <div class="row" *ngIf="object.content">
    <pre>
      <li *ngFor="let obj of object?.content">obj | json</li>
    </pre>
  </div>

---

---

没有错误：v1

  <div class="row">
    <pre>
      <li *ngFor="let obj of object?.content">obj | json</li>
    </pre>
  </div>

没有错误：v2

  <div class="row" *ngIf="object?.content">
    <pre>
      <li *ngFor="let obj of object.content">obj | json</li>
    </pre>
  </div>

没有错误：v3

  <div class="row" *ngIf="object?.content">
    <pre>
      <li *ngFor="let obj of object?.content">obj | json</li>
    </pre>
  </div>