在 header Angular6 中显示用户名

Question

我一直在到处寻找这个答案。我有一个 header 组件，我想显示当前登录用户的名称。在 header.component.html:

<a href="javascript:void(0)" class="nav-link" ngbDropdownToggle>
                <i class="fa fa-user"></i>USERNAME HERE<b class="caret"></b>
            </a>

并且在 header.component.ts 我在构造函数和 ngOnInit 之外有这个方法

displayName(){
    return localStorage.getItem("username");
}

有没有办法在 header 我想要的地方显示该用户名？

Answer 1

我认为你没有存储数据。

如何存储用户名？你在哪里存储数据？

如果你收藏单品喜欢

displayName(){
   return localStorage.getItem("username"));
}
ngOnInit() {
  localStorage.setItem("username","adiós mundo");
}

如果你存储一个 object 我想你有一些像

displayName(){
   return JSON.parse(localStorage.getItem("data")).userName;
}
ngOnInit() {
   let data={userName:"Hola Mundo",eamil:"qqq@qqq.com"}
   localStorage.setItem("data",JSON.stringify(data));
}

我将代码放在 ngOnInit 中，我想你将数据存储在表单的提交中

在 header Angular6 中显示用户名

Displaying username in header Angular6

html

angular

angular6