在标题Angular6中显示用户名答案

【问题标题】：Displaying username in header Angular6在标题Angular6中显示用户名
【发布时间】：2018-12-11 02:45:24
【问题描述】：

我一直在到处寻找这个答案。我有一个标题组件，我想显示当前登录用户的名称。在 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");
}

有没有办法在我想要的标题上显示该用户名？

【问题讨论】：

在您的 html {{displayName()}} 中，请参阅 angular.io/guide/displaying-data
@Eliseo {{displayName()}} 没用跨度>
在函数 displayName 中放 console.log("*",localStorage.getItem("username")) 看看函数返回的值是多少
哦，我明白了，它返回 null 所以 displayName 可能有效，只需要找到用户名。
在本地存储中，用户拥有所有信息、ID、用户名和电子邮件。我怎样才能让它只显示用户名？

标签： html angular angular6

【解决方案1】：

我认为您没有存储数据。

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

如果您存储在单个项目中，例如

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

如果你存储一个对象，我想你有一些类似

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 中，我假设你将数据存储在表单的提交中

【讨论】：

这有点奏效。我做到了：displayName(){ return JSON.parse(localStorage.getItem("user")).username;; }