wake-up-neo.com

Angular 2: TypeError: l_thing0 ist in [{{thing.title}} in AppComponent @ 4: 44 undefiniert.

Ich bekomme einen seltsamen Fehler in meiner App. Es soll {{thing.title}} von einem Objekt aus drucken, aber es wird ein Fehler in der Konsole angezeigt:

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

Ich bin nicht sicher, woher l_thing0 kommt. Wenn ich versuche, {{thing}} auf der Seite anzuzeigen, wird [object Object] angezeigt. Wenn ich versuche, JSON.stringify(this.thing) (siehe die Funktion showObj()), wird das stringified-Objekt korrekt angezeigt. Wenn ich jedoch auf ein Attribut wie {{thing.title}} zugreifen möchte, erhalte ich die Fehlermeldung, dass l_thing0 nicht definiert ist.

Hier ist 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();
    }
}

Irgendwelche Ideen?

24
Josh

Das Problem ist, dass thing beim ersten Laden der Seite immer noch undefiniert ist und später asynchron auf ihren tatsächlichen Wert gesetzt wird. Wenn das erste Mal versucht wird, auf die Eigenschaft zuzugreifen, wird eine Ausnahme ausgelöst. Der ? elvis-Operator ist eine Verknüpfung zu einer Nullprüfung: 

{{thing?.title}}

Es ist jedoch in der Regel eine beste Idee, performanter zu sein. Versuchen Sie nicht einmal, die Komponente zu rendern, bis Sie das eigentliche Objekt haben, indem Sie Folgendes hinzufügen:

<h1 *ngIf="thing">

zum Behälter.

50
Langley

ich komme zwar zu spät zur Party, dachte aber, dass dies für diejenigen hilfreich sein könnte, die Angular 5 verwenden.. Also hier ist mein Code, um das Problem anzusprechen.

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

Sie können auch eine neue Variable isFinished auf false setzen, bevor Sie Daten vom Server oder von der async-Funktion abrufen und die Daten nach dem Empfang auf true setzen. Setzen Sie dann die Variable isFinished in *ngIf, um zu prüfen, ob der Server-/Funktionsprozess abgeschlossen ist. 

0
Reza Neghabi