web-dev-qa-db-fra.com

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

J'ai attaché le plunker de mon morceau de code angular2. Je veux imprimer un champ à partir de mon JSON, mais je ne peux pas l'imprimer car initialement, mon objet est nul et il est renseigné via une promesse.

Ceci 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 {}

Lorsque je supprime la ligne {{abc.xyz.name}} de mon modèle, elle fonctionne correctement.

J'ai utilisé set time out dans mon code parce que je reçois mes données de Promise (appel asynchrone).

Je peux comprendre initialement que abc est null, mon code est incapable de trouver abc.xyz.name. Mais je ne veux pas mettre une condition si pour vérifier. Parce que j'ai plusieurs propriétés dans un JSON et qu'il n'est pas possible pour chaque propriété d'écrire si condition.

Plus tôt dans angularjs 1, si abc est nul, il sera automatiquement remplacé par une chaîne vide. Je veux faire la même chose dans angular2. Veuillez suggérer.

Ci-dessous est le plunker

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

angularangular2-template2-way-object-databinding
28
Partha Sarathi Ghosh

En effet, abc n'est pas défini au moment du rendu du modèle. Vous pouvez utiliser l'opérateur de navigation sûr (?) pour "protéger" le modèle jusqu'à ce que l'appel HTTP soit terminé:

{{abc?.xyz?.name}}

Vous pouvez en savoir plus sur l'opérateur de navigation sécurisée ici .

Mettre à jour:

L'opérateur de navigation sûr ne peut pas être utilisé dans les tableaux, vous devrez tirer parti de la directive NgIf pour résoudre ce problème:

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

En savoir plus sur la directive NgIfici .

82
Stefan Svrkota

Un opérateur de navigation sécurisé ou un opérateur existentiel ou un opérateur de propagation null est pris en charge dans Angular Template Supposons que vous ayez une classe de composants 

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