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 = "";