Question

我在我的应用中遇到了一个奇怪的错误。它应该从对象打印出{{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();
    }
}

有什么想法吗？

Answer 1

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

{{thing?.title}}

但它通常是一个最好的想法更高效甚至尝试渲染组件，直到你有真正的对象，通过添加如下内容：

<h1 *ngIf="thing">

到容器。

Answer 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>

Answer 3

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

Answer 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>

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

4 个答案: