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

IT技术 javascript angular typescript
2021-01-15 12:04:10

我的应用程序中出现一个奇怪的错误。它应该{{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();
    }
}

有任何想法吗？

4个回答

问题是第一次加载页面时，页面thing仍然未定义，稍后异步地将其设置为其实际值，因此第一次尝试访问该属性时，它会抛出异常。该?Elvis操作符是一个快捷方式nullcheck：

{{thing?.title}}

但它通常是一个更好的主意，甚至不要尝试渲染组件，直到您通过添加以下内容获得真实对象：

<h1 *ngIf="thing">

到容器。

所以你的意思是我们必须使用*ngIf而不是?对吗？
2021-03-24 12:04:10
此解决方案有效，但是您将如何避免在加载值时导致 DOM 跳汰机？是否有一种优雅的方法可以在标签中添加一些诸如“正在加载”之类的文本，并在值加载后将其换出？
2021-03-28 12:04:10
抱歉直到现在才看到你的消息。这是完全独立的，如果您异步加载数据，无论是否进行空检查都会发生这种情况。对于某些设计人员来说，这是可以的，您应该在获得数据时加载和显示数据。就个人而言，我讨厌这种闪烁，我更喜欢在信息准备好后加载整个页面。我发现避免这种情况及其使用的最佳方法是像 ui-router 这样的路由器上的解析功能，这些功能将推迟启动组件，直到所有已注册的解析加载模型。
2021-04-06 12:04:10

虽然我迟到了，但我认为这可能对那些使用 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>
将其报告为错误
2021-03-24 12:04:10

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

我正在使用 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>
其它你可能感兴趣的问题
上一篇您可以在 JavaScript 中设置和/或更改用户的文本选择吗？ 下一篇如何在 JavaScript 对象数组中查找重复值，并仅输出唯一值？