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> 

僅當有在USERFIRSTNAME

方法2的值這將加載DOM：使服務來電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 = "";