Angulaire 2: TypeError: l_thing0 est pas défini dans [{{chose.titre}} en AppComponent@4:44]

J'ai une erreur étrange dans mon application. Il est censé imprimer {{thing.title}} à partir d'un objet, mais il affiche une erreur dans la console:

EXCEPTION: TypeError: l_thing0 is undefined in [{{thing.title}} in AppComponent@4:44]

Je ne suis pas sûr de l'endroit où l_thing0 vient de. Si j'essaie de montrer {{thing}}dans la page, il affiche [object Object]. Si j'essaie de JSON.stringify(this.thing) (voir la showObj() fonction), il affiche correctement le stringified objet. Mais si je tente d'accéder à un attribut comme {{thing.title}} je reçois le message d'erreur que l_thing0 est pas défini.

Ici est d'application.composante.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();
    }
}

Des idées?

Est-ce à {{thing?.title}} fait disparaître l'erreur?
Oui, merci. J'ai juste compris. (au bout de 7 heures. :/ )
np, essayez de ne pas obtenir utilisé à l'opérateur si, j'ai posté une meilleure solution pour elle.
Bonne idée. Merci.

InformationsquelleAutor Josh | 2016-01-16

52

Le problème est que la première fois que vous chargez la page, thing est toujours pas défini, il est défini à sa valeur réelle, plus tard, sur asyncronously, de sorte que la première fois qu'il tente d'accéder à la propriété, il lèvera une exception. Le ? elvis opérateur est un raccourci vers un nullcheck:

{{thing?.title}}

Mais est généralement une meilleure idée plus performant même pas essayer de rendre le composant à tous jusqu'à ce que l'objet réel en ajoutant quelque chose comme:

<h1 *ngIf="thing">

pour le conteneur.
- donc vous voulez dire que nous devons utiliser *ngIf au lieu de ? droit ?
- cette solution fonctionne, mais comment voulez-vous éviter les DOM turlutte que les résultats sous forme de valeurs sont chargés dans? Est-il un moyen élégant d'avoir un peu de texte comme "Chargement" dans la balise et obtenir échangé une fois que les valeurs de charge dans?
- Désolé, je n'ai jamais vu votre message jusqu'à maintenant. C'est totalement indépendant, si vous avez des données de manière asynchrone chargé qui ne se produit indépendamment de la valeur null vérifie ou pas. Pour certains concepteurs c'est ok et vous devez charger et afficher des données comme vous l'obtenez. Personnellement, je déteste ce scintillement et je préfère charger l'intégralité de la page, une fois que l'info est prêt. Le meilleur moyen que j'ai trouvé pour éviter cela et ses ce que j'utilise, est la détermination de la fonctionnalité sur les routeurs comme l'interface utilisateur du routeur, ceux-ci vont retenir initier les composants jusqu'à ce que le modèle a été chargé par tous les résout.
InformationsquelleAutor Langley

si je suis arrivé en retard à la fête, mais pensé que cela pourrait aider pour ceux qui sont à l'aide Angulaire 5.
Étrangement remarqué la elvis opérateur ne fonctionne pas dans l' *ngFor boucle, mais travaille pour *ngif. Alors, voici mon code pour résoudre le problème.

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

Comme le rapport d'un bug

InformationsquelleAutor sagars01

0

Vous pouvez aussi définir une nouvelle variable isFinished à false avant de récupérer les données à partir du serveur ou asynchrone en fonction et après réception de l'ensemble de données à true. Ensuite, mettre isFinished variable dans *ngIf pour vérifier si le serveur de la fonction/le processus est fait?

InformationsquelleAutor Reza Neghabi

Je suis en utilisant Angulaire de 8 et, bien que les données s'affichent, j'ai aussi eu cette erreur et googler ça m'a apporté à cette question. La accepté de répondre (même si bien expliqué) ne résout pas pour moi. (Peut-être parce que d'une version plus récente, ou les utiliser avec *ngFor)
Il ne suffit pas de simplement utiliser *ngIf, comme vous pouvez le voir:

déclenche une erreur: v1

  <div class="row">
    <pre>
      <li *ngFor="let obj of object.content">{{obj | json}}</li>
    </pre>
  </div>

déclenche une erreur: v2

  <div class="row" *ngIf="object.content">
    <pre>
      <li *ngFor="let obj of object.content">{{obj | json}}</li>
    </pre>
  </div>

déclenche une erreur: v3

  <div class="row" *ngIf="object.content">
    <pre>
      <li *ngFor="let obj of object?.content">{{obj | json}}</li>
    </pre>
  </div>

pas d'erreur: v1

  <div class="row">
    <pre>
      <li *ngFor="let obj of object?.content">{{obj | json}}</li>
    </pre>
  </div>

pas d'erreur: v2

  <div class="row" *ngIf="object?.content">
    <pre>
      <li *ngFor="let obj of object.content">{{obj | json}}</li>
    </pre>
  </div>

pas d'erreur: v3

  <div class="row" *ngIf="object?.content">
    <pre>
      <li *ngFor="let obj of object?.content">{{obj | json}}</li>
    </pre>
  </div>

InformationsquelleAutor connectedMind

Vous devez vous connecter pour publier un commentaire.