Привязка Angular 2+ - WebAPI - Не удается прочитать свойство 'Имя пользователя' из неопределенного

Question

Я пытаюсь сделать привязку в моем угловом приложении.

В моем component.html у меня есть:

<span>{{this.test.Username}}</span>

И это мой component.ts:

export class NavbarComponent implements AfterViewChecked, OnInit{     

   test: User;

   constructor(private userService: UserService) {                                                 
   }   

   ngOnInit() {
      var currentUser = JSON.parse(localStorage.getItem('currentUser'));
      var id = currentUser.userID;        
      this.userService.getById(id).subscribe(user => {                        
        this.test = new User();
        this.test = user;            
      });                 
   }
}

На самом деле привязка работает, и появляется имя пользователяна стороне клиента, но проблема в том, что браузер возвращает эту ошибку:

ERROR TypeError: Cannot read property 'Username' of undefined
at Object.eval [as updateRenderer] (NavbarComponent.html:79)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:11087)
at checkAndUpdateView (core.js:10463)
at callViewAction (core.js:10699)
at execComponentViewsAction (core.js:10641)
at checkAndUpdateView (core.js:10464)
at callViewAction (core.js:10699)
at execComponentViewsAction (core.js:10641)
at checkAndUpdateView (core.js:10464)
at callViewAction (core.js:10699)

Может кто-нибудь мне помочь?

Заранее спасибо

Answer 1

Если User является классом, инициализируйте в constructor

 this.test = new User();

Answer 2

установите начальное значение на test

test: User = { Username : null };

Или используйте опциональный оператор в шаблоне

<span>{{this.test?.Username}}</span>