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()}}