Angular 2: TypeError: l_thing0 non è definito in

Sto ricevendo uno strano errore nella mia app. Dovrebbe stampare {{thing.title}} da un object, ma mostra un errore nella console:

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

Non sono sicuro da dove l_thing0 . Se provo a mostrare {{thing}} nella pagina, visualizza [object Object] . Se provo a JSON.stringify(this.thing) (vedere la funzione showObj() ), visualizza correttamente l’object stringa. Ma se provo ad accedere ad un attributo come {{thing.title}} ottengo l’errore che l_thing0 non è definito.

Ecco 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: ` 

{{thing.title}} Show Stringified Obj

`, 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(); } }

Qualche idea?

Il problema è che la prima volta che si carica la pagina, la thing è ancora definita, viene impostata sul suo valore reale in seguito in maniera asincrona, quindi la prima volta che tenta di accedere alla proprietà, genererà un’eccezione. Il ? L’operatore elvis è un collegamento a nullcheck:

{{thing?.title}}

Ma di solito è una buona idea, più performante, nemmeno provare a renderizzare il componente fino a quando non si ottiene l’object reale aggiungendo qualcosa come:

al contenitore.

anche se sono in ritardo per la festa ma ho pensato che questo potesse essere d’aiuto per coloro che usano Angular 5. Stranamente notato che l’operatore elvis non funzionerà nel ciclo * ngFor, ma funziona per * ngif. Quindi, ecco il mio codice per risolvere il problema.

 

{{fullObject.objProperty1}}

{{o._subheader}}

{{o._subtext}}

È anche ansible impostare una nuova variabile isFinished su false prima di recuperare i dati dal server o dalla funzione asincrona e dopo aver ricevuto il set di dati su true . Quindi inserire la variabile isFinished in *ngIf per verificare se il processo server / funzione è stato eseguito?