Angular4:数据绑定仅在初始化之前工作
问题描述:
我有一个简单的组件,其属性为userFirstName
。Angular4:数据绑定仅在初始化之前工作
现在我只想显示此属性。我已经做了一个简单的绑定,并且我在构造函数中初始化了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>
答
由于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 = "";