property - angular2: Error: TypeError: No se puede leer la propiedad ''...'' de undefined

viewchild angular 4 example

Question

He adjuntado el plunker de mi pieza de código angular2. Quiero imprimir un campo desde mi JSON pero no puedo imprimirlo ya que inicialmente mi objeto es nulo y se está completando a través de una promesa.

Este es mi archivo 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: `
<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 {}

Cuando estoy eliminando la línea {{abc.xyz.name}} de mi plantilla, funciona bien.

He usado el tiempo de espera establecido en mi código porque estoy obteniendo mis datos de Promise (es decir, llamada asincrónica).

Inicialmente puedo entender que 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 si es 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.

Debajo está el saqueador

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

Answer 1

El operador de navegación segura o el operador existencial o el operador de propagación nula son compatibles con la plantilla angular. Supongamos que tiene la clase 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 plantilla de la siguiente manera:

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

Answer 2

Esto se debe a que 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 here .

Actualizar:

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

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

Lea más sobre la directiva NgIf here .