Angular 2 从 localStorage 获取密钥并显示在列表中答案

【问题标题】：Angular 2 Get keys from localStorage and display in a listAngular 2 从 localStorage 获取密钥并显示在列表中
【发布时间】：2017-09-22 14:42:41
【问题描述】：

我正在尝试将 localStorage 数据显示到列表中。我尝试将它与 *ngFor 绑定，但我似乎没有做对。

【问题讨论】：

您的for 和显示的*ngFor 之间没有链接。需要更多信息

标签： html angular list local-storage

【解决方案1】：

声明一个数组类型的变量

users: any = [];

然后

this.users = JSON.parse(localStorage.getItem('users'));

【讨论】：

我试过了，但它抱怨它必须是数组类型，或者同样，JSON 不适用于 *ngFor 函数
你的本地存储是什么样子的
键：用户值：{"name":"Kevin","country":"Canada","about":"Test","image":""}

【解决方案2】：

ngFor 仅适用于数组而不是对象。将本地存储数据推送到数组中。然后使用 ngFor。

更新

最好不要使用ngFor，因为你没有重复的界面。我建议你这样去

localData = { Key: User, Value: {"name":"Kevin","country":"Canada","about":"Test","image":""‌}}

在你的 HTML 中

<ul>
   <li>{{localData.key}}</li>
   <li>{{localData.value.name}}</li>
   <li>{{localData.value.country}}</li>
   <li>{{localData.value.about}}</li>
   <li>{{localData.value.image}}</li>
</ul>

我希望这可以帮助你。如果您仍然需要 *ngFor 用法，请在下方评论。我会帮忙的

【讨论】：

您能否通过代码示例详细说明如何做到这一点？这是我的 localStorage JSON Key: User Value {"name":"Kevin","country":"Canada","about":"Test","image":""}