Angular2: Ошибка: TypeError: невозможно прочитать свойство "..." из undefined

Я подключил плункер моей части кода angular2. Я хочу напечатать поле из моего JSON, но не могу его напечатать, так как изначально мой объект имеет значение null, и он заполняется через Promise.

Это мой компонентный файл

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

Когда я удаляю строку {{abc.xyz.name}} из моего шаблона, она работает нормально.

У меня есть установленное время в моем коде, потому что я получаю свои данные от Promise (асинхронный вызов).

Я могу понять изначально, поскольку abc is null, мой код не может найти abc.xyz.name. Но я не хочу устанавливать какие-либо условия для проверки. Поскольку у меня есть несколько свойств внутри JSON, и невозможно, чтобы каждое свойство записывало, если условие.

Ранее в angularjs 1, если abc имеет значение null, он автоматически заменяет его пустой строкой. Я хочу сделать то же самое в angular2. Пожалуйста, предложите.

Ниже находится плункер

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

Ответ 1