0

我有一个带有属性的简单组件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>
4

1 回答 1

1

由于 DOM 加载速度更快，它不会等待 localStorage 的响应，所以你会遇到这个问题。

使固定 ：

方法一：使用*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 = "";
于 2017-06-18T01:58:02.653 回答