如何使用循环以表格形式打印 Localstorage 数组值？

【问题标题】：How to print Localstorage array values in tabular form using a loop?如何使用循环以表格形式打印 Localstorage 数组值？
【发布时间】：2020-02-01 12:37:07
【问题描述】：

我将表单提交存储在本地存储键中作为数组'fsubs'，如下所示：

var fsubs = JSON.parse(localStorage.getItem('fsubs') || "[]");
var fcodes = {"barcodeno" : this.form.value.barcode, "reelno" : this.form.value.reelno, "width" : this.form.value.width, "dia" : this.form.value.dia, "weight" : this.form.value.weight};
fsubs.push(fcodes);
localStorage.setItem('fsubs', JSON.stringify(fsubs));

现在的问题是我必须使用循环以像这样的表格形式打印这些值，但我不知道该怎么做。

条码 |雷尔诺
122121 | 232323

P.S.：我想在我的组件中使用 Angular 中的打字稿打印这个

【问题讨论】：

标签： javascript angular typescript local-storage angular-local-storage

【解决方案1】：

试试这样：

component.ts:

fsubList:Array<any> = JSON.parse(localStorage.getItem('fsubs'));

模板：

<table>
   <tr>
    <th>Barcode</th>
    <th>Reelno</th>
  </tr>
  <tr *ngFor="let item of fsubList">
    <td>{{item.barcodeno}}</td>
    <td>{{item.reelno}}</td>
  </tr>
</table>

【讨论】：

我收到此错误Error: Uncaught (in promise): TypeError: JSON.Parse is not a function
console.log(localStorage.getItem('fsubs')) 并显示输出
是的 Error: Uncaught (in promise): TypeError: JSON.Parse is not a function 它即将进入控制台
并在解析中使用小的p。 JSON.parse
我希望本地存储中存储的数据在视图中自动更新。我该怎么做？这里用户必须刷新页面，才能在视图中显示数据