angular2: Erreur: TypeError: Impossible de lire la propriété '...' de non défini

Question

J'ai joint le plunker de mon angular2 code de la pièce. Je veux imprimer un champ de mon JSON, mais l'impossibilité d'imprimer que, comme au départ, mon Objet est null et il est alimenté par l'intermédiaire d'une Promesse.

C'est mon fichier de composant

import {Component, NgModule, OnInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

class MyData {
  xyz : MySubData;
}

class MySubData {
  name : string;
} 
@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

      {{abc.xyz.name}}
    </div>
  `,
})
export class App implements OnInit {
  abc : MyData = null;
  constructor() {
    this.name = 'Angular2'
  }

  ngOnInit() {
    setTimeout(() => {
      this.abc = new MyData();
      this.abc.xyz = new MySubData();
      this.abc.xyz.name = "Binita";
    }, 2000);
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Quand je suis en retrait de la ligne, {{abc.xyz.name}} de mon template, il est en cours d'exécution fine.

J'ai utilise de temps ensemble dans mon code car je reçois mes données de la Promesse (j'.e appel asynchrone).

Je peux comprendre d'abord comme abc est null, mon code est incapable de trouver de l'abc.xyz.nom. Mais je ne veux pas mettre tout si la condition à vérifier. Parce que j'ai plusieurs biens à l'intérieur d'un JSON et il n'est pas possible pour chaque propriété à écrire si la condition.

Plus tôt dans angularjs 1 si abc est null, alors il serait automatiquement remplacer par chaîne vide. Je veux faire la même chose dans angular2. S'il vous plaît suggérer.

Ci-dessous est la plunker

https://plnkr.co/edit/u1NqNF0penz7OS55QmoU?p=preview

Answer 1

C'est parce qu' abc n'est pas définie au moment du modèle de rendu. Vous pouvez utiliser la sécurité de la navigation de l'opérateur (?) pour "protéger" le modèle jusqu'à ce HTTP appel est terminé:

{{abc?.xyz?.name}}

Vous pouvez lire plus au sujet de la sécurité de la navigation de l'opérateur ici.

Mise à jour:

La sécurité de la navigation opérateur ne peut pas être utilisé dans des tableaux, vous aurez à prendre avantage de l' NgIf directive pour surmonter ce problème:

<div *ngIf="arr && arr.length > 0">
    {{arr[0].name}}
</div>

Lire plus à propos de NgIf directive ici.

Answer 2

L'opérateur de navigation sécurisée ou l'opérateur existentiel ou l'opérateur de propagation nulle est pris en charge dans le modèle angulaire. Supposons que vous ayez une classe Component

   myObj:any = {
    doSomething: function () { console.log('doing something'); return 'doing something'; },
  };
  myArray:any;
  constructor() { }

  ngOnInit() {
    this.myArray = [this.myObj];
  }
 

Vous pouvez l'utiliser dans un fichier HTML de modèle comme suit:

 <div>test-1: {{  myObj?.doSomething()}}</div>
<div>test-2: {{  myArray[0].doSomething()}}</div>
<div>test-3: {{  myArray[2]?.doSomething()}}</div>