angular2: Error: TypeError: no se puede leer la propiedad ‘…’ de undefined

He adjuntado el plunker de mi pieza de código angular2. Quiero imprimir un campo desde mi JSON, pero no puedo imprimir eso ya que inicialmente mi Objeto es nulo y se está llenando a través de Promesa.

Este es mi archivo de componente

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

Hello {{name}}

{{abc.xyz.name}}
`, }) 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 {}

Cuando {{abc.xyz.name}} la línea {{abc.xyz.name}} de mi plantilla, se ejecuta {{abc.xyz.name}} .

Utilicé el tiempo de espera establecido en mi código porque recibo mis datos de Promise (es decir, llamada asincrónica).

Puedo entender inicialmente como abc es null , mi código no puede encontrar abc.xyz.name. Pero no quiero poner ninguna condición si para verificar. Porque tengo varias propiedades dentro de un JSON y no es posible que cada propiedad escriba una condición.

Anteriormente en angularjs 1 si abc es nulo, entonces lo reemplazaría automáticamente con una cadena en blanco. Quiero hacer lo mismo en angular2. Por favor recomiende.

A continuación está el plunker

Eso es porque abc no está definido en el momento de la representación de la plantilla. Puede usar el operador de navegación segura ( ? ) Para “proteger” la plantilla hasta que se complete la llamada HTTP:

 {{abc?.xyz?.name}} 

Puede leer más sobre el operador de navegación segura aquí .

Actualizar:

El operador de navegación segura no se puede usar en arreglos, tendrá que aprovechar la directiva NgIf para superar este problema:

 
{{arr[0].name}}

Lea más acerca de la directiva NgIf aquí .

El operador de navegación segura o el operador existencial o el operador de propagación nula es compatible con la plantilla angular. Supongamos que tiene una clase de Componente

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

Puede usarlo en el archivo html de la plantilla de la siguiente manera:

 
test-1: {{ myObj?.doSomething()}}
test-2: {{ myArray[0].doSomething()}}
test-3: {{ myArray[2]?.doSomething()}}
Intereting Posts