Angular4: привязка данных работает только перед инициализацией

Question

У меня есть простой компонент со свойством userFirstName,

Теперь я просто хочу отобразить это свойство. Я сделал простую привязку, и я инициализирую userFirstName в конструкторе, но он работает только тогда, когда есть первая команда!

Так что это работает отлично: и показывает текст "Имя пользователя".

this.userFirstName = "User Name";
this.loggedIn = localStorage.getItem("currentUser")!=null;
var currentUser = localStorage.getItem('currentUser');
let user:User = JSON.parse(currentUser) ;
this.userFirstName = localStorage.getItem('currentUser');

Теперь, если я поставлю this.userFirstName = "User Name"; наконец, это не работает.

Так что это не работает и показывает пустую строку!

   this.loggedIn = localStorage.getItem("currentUser")!=null;
    var currentUser = localStorage.getItem('currentUser');
    let user:User = JSON.parse(currentUser) ;
    this.userFirstName = localStorage.getItem('currentUser');
    this.userFirstName = "User Name";

Вот соответствующий HTML:

<div>
     <a >Hello  {{userFirstName}} ! </a>
//some content
</div>

Answer 1

Поскольку DOM загружается быстрее, он не будет ждать ответа от localStorage, поэтому вы получите эту проблему.

Исправить:

Способ 1: использование *ngIf

<div *ngIf="userFirstName"> ... </div>

Это загрузит DOM, только если в userFirstName есть значение

Способ 2. Выполнение вызовов службы в constructor()

constructor(){
    this.loggedIn = localStorage.getItem("currentUser")!=null;
    var currentUser = localStorage.getItem('currentUser');
    let user:User = JSON.parse(currentUser) ;
    this.userFirstName = localStorage.getItem('currentUser');
}

Метод 3: Инициализация переменной с пустой строкой во время самого объявления.

userFirstName = "";