angular2: Hata: TypeError: undefined '...' özelliği okunamıyor

Question

Angular2 kod parçamın plunker ekledim. JSON'umdan bir alan yazdırmak istiyorum ancak bunu başlangıçta benim Nesnem boş olarak yazdıramıyor ve bir Promise ile dolduruluyor.

Bu benim bileşen dosya bunu iyi çalışıyor benim şablondan hattını {{abc.xyz.name}} çıkarmadan am

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

olduğunu.

Kodumda zaman aşımını kullanıyorum çünkü verilerimi Promise'den alıyorum (eşzamansız çağrı).

Başlangıçta abc kodunun null olduğunu anlayabiliyorum, kodum abc.xyz.name dosyasını bulamıyor. Ama kontrol edilecek bir durum varsa, hiç bir şey koymak istemiyorum. Çünkü bir JSON içinde birkaç mülküm var ve eğer her özellik için şartın yazılması mümkün değil.

Eğer abc null ise, angularjs 1'de daha sonra otomatik olarak boş bir dizeyle değiştirilir. Ben aynı şeyi köşeli 2'de yapmak istiyorum. Lütfen öneriniz.

Aşağıda abc şablon render anında tanımlanmamış için var plunker

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

Answer 1

olduğunu. HTTP çağrı tamamlanana kadar şablonu "koruma" güvenli navigasyon operatörü (?) kullanabilirsiniz:

{{abc?.xyz?.name}} 

güvende navigasyon operatörü here hakkında daha fazla bilgi bulabilirsiniz.

Güncelleme:

Güvenli gezinme operatör dizilerde kullanılamaz, bu sorunu aşmak için NgIf direktif yararlanmak zorunda kalacak:

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

daha yaklaşık NgIf direktifini here okuyun.

Answer 2

Açısal Şablonda güvenli gezinme operatörü veya Varolan Operatör veya Boşalma Yayılımı Operatörü desteklenir.

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