angle2: Błąd: TypeError: Nie można odczytać właściwości "..." nieokreślonego

Question

Dołączyłem plunkera z mojego kodu kreskowego2. Chcę wydrukować pole z mojego JSON, ale nie mogę wydrukować, ponieważ początkowo mój obiekt jest pusty i jest wypełniany przez obietnicę.

To jest mój plik komponent

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

Kiedy jestem usunięcie linii {{abc.xyz.name}} z mojego szablonu to działa prawidłowo.

Używam ustawionego limitu czasu w moim kodzie, ponieważ otrzymuję moje dane z obietnicy (to jest wywołania asynchronicznego).

Mogę zrozumieć początkowo jako jest null, mój kod nie może znaleźć abc.xyz.name. Ale nie chcę wystawiać żadnego warunku do sprawdzenia. Ponieważ mam wiele właściwości wewnątrz JSON i nie jest możliwe dla każdej właściwości, aby napisać, jeśli warunek.

Wcześniej w angularjs 1, jeśli abc ma wartość null, to automatycznie zastąpi go pustym ciągiem. Chcę zrobić to samo w kanciarzu2. Proszę zasugeruj.

Poniżej plunker

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

Answer 1

To dlatego abc jest niezdefiniowane w momencie renderowania szablonu. Można użyć bezpiecznego operatorem nawigacji (?), aby „chronić” szablon do momentu wywołania HTTP jest zakończona:

{{abc?.xyz?.name}} 

można przeczytać więcej na temat bezpiecznej nawigacji here operatora.

Aktualizacja:

Bezpieczne nawigacji operator nie może być stosowany w układach, trzeba będzie skorzystać z dyrektywy NgIf aby rozwiązać ten problem:

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

Więcej o NgIf dyrektywę here.

Answer 2

Operator bezpiecznego nawigowania lub Operator egzystencjalny lub Operator propagacji zerowej jest obsługiwany w szablonie kątowym. Załóżmy, że masz komponent klasa

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

    ngOnInit() { 
    this.myArray = [this.myObj]; 
    } 

można go używać w pliku html szablonu w następujący sposób:

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