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 .