Question

我有一个使用localStorage具有CRUD功能的Angular应用程序。我需要从几个输入字段中收集一个名为rubberboot的数据对象，并将其推入保存对象数组的localStorage键rubbberboots。

这里的堆叠闪电战：https://stackblitz.com/edit/github-4lgqkx

使用 lisaa.component.ts 中的输入字段，数据应为

{ name: "foo", color: "bar", price: 123, availability: 123 }

，但是将空数组推送到localStorage

[[]]

kumpparit.service.ts 中的这段代码将rubberboot推送到localStorage：

addRubberboot = (rubberboot: rubberboot) => {
    if (typeof (Storage) != undefined) {
      let rubberboots = JSON.parse(localStorage.getItem("rubberboots"));
      rubberboot.id = this.generateId();

      rubberboots.push(rubberboot);
      localStorage.setItem("rubberboots", JSON.stringify(rubberboots));
    }
  }

并且此函数为id对象生成rubberboot，因为id来自localStorage而不是输入字段：

generateId = () => {
    if (typeof (Storage) != undefined) {
      let rubberboots: rubberboot[] = JSON.parse(localStorage.getItem("rubberboots"));
      let index = 0;
      for (let rubberboot of rubberboots) {
        index++;
      }
      return index;
    }
  }

我期望localStorage密钥rubberboot现在保留

的值

[ { name: "foo", color: "bar", price: 123, availability: 123, id: 0 } ]

以及对localStorage的下一次推送操作会将rubberboot键的值设置为

[ 
    { name: "foo", color: "bar", price: 123, availability: 123, id: 0 },
    { name: "foo", color: "bar", price: 123, availability: 123, id: 1 } 
]

Answer 1

问题是您将ruberboot定义为一个数组，并在LisaaComponent中为其分配一个数组，而不是组件中的对象。然后，序列化将尝试序列化一个数组数组。

将其更改为此（我添加了一些初始化程序，如果需要，可以更改定义以允许属性的未定义值。）

rubberboot: rubberboot = {availability: 0, color: '', name: '', price: 0, id: 0};

最初您有：

rubberboot: rubberboot[] = [];

您更新的stackblitz

空数组被推送到localStorage而不是数据

1 个答案: