angular2: Fehler: TypeError: Kann die Eigenschaft '...' von undefined nicht lesen

Question

Ich habe den Plunker meines angular2 Codeteils angebracht. Ich möchte ein Feld aus meinem JSON drucken, aber nicht drucken, da mein Objekt anfänglich null ist und es über ein Versprechen gefüllt wird.

Dies ist meine Komponentendatei

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

Wenn ich die Linie bin Entfernen {{abc.xyz.name}} von meiner Vorlage es gut läuft.

Ich habe Verwendung Zeit in meinem Code festlegen, weil ich meine Daten von Promise (d. H. Asynchroner Anruf).

Ich kann zunächst als abc ist null verstehen, ist mein Code nicht abc.xyz.name finden. Aber ich möchte keine Umstände unter die Lupe nehmen. Weil ich mehrere Eigenschaften in einem JSON habe und es nicht möglich ist, dass jede Eigenschaft schreibt, wenn es eine Bedingung ist.

Früher in angularjs 1 Wenn abc null ist, wird es automatisch durch leere Zeichenfolge ersetzt. Ich möchte dasselbe in angular2 tun. Bitte vorschlagen.

Unten ist der Plunker

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

Answer 1

Das ist, weil abc zur Zeit der Vorlage Rendering nicht definiert ist. Sie können eine sichere Navigation Operator (?) verwenden, um Vorlage "zu schützen", bis HTTP-Aufruf abgeschlossen ist:

{{abc?.xyz?.name}} 

Sie können here mehr über eine sichere Navigation Betreiber lesen.

Update:

Sichere Navigation Betreiber nicht in Arrays verwendet werden können, werden Sie die Vorteile der NgIf Richtlinie ergreifen müssen, um dieses Problem zu überwinden:

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

Lesen Sie mehr über NgIf Richtlinie here.

Answer 2

Sicherer Navigationsoperator oder Existential Operator oder Null Propagation Operator wird in Angular Template unterstützt. Angenommen, Sie Komponentenklasse

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

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

Sie können es in Vorlage HTML-Datei wie folgt haben:

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