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

中有值时才会加载DOM

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

Angular4：数据绑定仅在初始化之前有效

1 个答案: