Angular 2: TypeError: l_thing0 является undefined в [{{thing.title}} в AppComponent @4: 44]

Я получаю странную ошибку в своем приложении. Он должен распечатать {{thing.title}} с объекта, но он показывает ошибку в консоли:

EXCEPTION: TypeError: l_thing0 is undefined in [{{thing.title}} in [email protected]:44]

Я не уверен, откуда приходит l_thing0. Если я попытаюсь показать {{thing}} на странице, он отобразит [object Object]. Если я попытаюсь JSON.stringify(this.thing) (см. Функцию showObj()), он правильно отобразит стробированный объект. Но если я попытаюсь получить доступ к атрибуту типа {{thing.title}}, я получаю сообщение об ошибке l_thing0 undefined.

Вот 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();
    }
}

Любые идеи?

Ответы

Ответ 1

Проблема заключается в том, что при первой загрузке страницы thing по-прежнему undefined, она получает значение по своему значению позже, асинхронно, поэтому в первый раз, когда он пытается получить доступ к свойству, он будет исключение. Оператор ? elvis - это ярлык для nullcheck:

{{thing?.title}}

Но обычно это лучшая идея, более эффективная, даже не пытающаяся отобразить компонент вообще, пока у вас нет реального объекта, добавив что-то вроде:

<h1 *ngIf="thing">

в контейнер.

Ответ 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

Вы также можете установить новую переменную isFinished в false до получения данных с сервера или асинхронной функции и после получения данных установите ее на true. Затем введите isFinished variable в *ngIf, чтобы проверить, завершен ли процесс server/function?

Ответ 4

Я использую Angular 8 и, хотя данные отображаются, у меня также была эта ошибка, и поиск в Google привел меня к этому вопросу. Принятый ответ (хотя и хорошо объясненный) не решил его для меня. (Возможно из-за более новой версии или использования с * 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>