循环遍历本地存储数组 returns undefined

Question

上下文：我有一个数组，它是根据推送到本地存储的字符串条目集合创建的。然后我遍历这些条目并从对象数组中找到匹配的值。它应该会带回匹配的对象。

问题：只有在应用程序打字稿文件中使用模拟数据时，我才能将其获取到 return 匹配的对象。但是，当我引入本地存储来替换模拟的推送值数组时，生成的对象 return 未定义。我无法理解的是，执行映射之前的控制台日志确实表明两个查询数组（包括本地存储的数组）已准备就绪并且与模拟数据相同。

我在 stackblitz 上创建了一个同样显示错误的示例。我在示例中创建了两个循环。一份用于本地存储，一份用于模拟数据。

我正在使用 Angular 应用程序，因此出于演示目的，我已在构造函数中推送到本地存储并在 ngOnInit() 中填充数组。通常本地存储会在另一个页面上填充，但为了便于演示，这代表了具有相同结果的类似场景。

 export class AppComponent {
  constructor() {
    //passing data into local storage
    let data = ["1", "2"];
    const key = "item";
    let id = JSON.parse(localStorage.getItem(key)) || [];
    if (id.indexOf(data) == -1) {
      id.push(data);
      localStorage.setItem(key, JSON.stringify(id));
    }
  }

  array = [];
  arrayTwo = ["1", "2"];
  fieldOptions = [
    {
      id: "1",
      type: "I_am_RED",
      displayKey: "I_am_RED"
    },
    {
      id: "5",
      type: "I_am_RED",
      displayKey: "I_am_RED"
    },
    {
      id: "2",
      type: "I_am_BLUE",
      displayKey: "I_am_BLUE"
    },
    {
      id: "3",
      type: "I_am_BLUE",
      displayKey: "I_am_BLUE"
    },
    {
      id: "4",
      type: "I_am_GREEN",
      displayKey: "I_am_GREEN"
    }
  ];

  ngOnInit() {
    const key = "item";
    this.array.push(JSON.parse(localStorage.getItem(key)));

    //local storage loop
    for (const item of this.array) {
      let obj = this.fieldOptions.find(o => o.id === item);
      console.log("Array Object result getting local storage", obj);
    }

    //mock loop - mock array to simulate local storage
    for (const item of this.arrayTwo) {
      let obj = this.fieldOptions.find(o => o.id === item);
      console.log("ArrayTwo Object result", obj);
    }
  }
}

Answer 1

在构造函数中，“数据”是一个字符串数组。 indexOf() 将尝试比较对象标识，而不是内容，因此 id.indexOf(data) 将始终为 -1 （因为 ["1", "2"] == ["1", "2"] 是假的）。

在 ngOnInit 中，您正在将一个数组推送到另一个数组，这真的是您想要的吗？我猜你可能想使用 this.array = this.array.concat(JSON.parse(localStorage.getItem(key)))

Answer 2

您正在本地存储中添加数组数组。试试下面的代码：

import { Component } from "@angular/core";
import { forEach } from "@angular/router/src/utils/collection";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html"
})
export class AppComponent {
  constructor() {
    //passing data into local storage
    let data = ["1", "2"];
    const key = "item";
    let id = JSON.parse(localStorage.getItem(key)) || [];

    for (let i = 0; i < data.length; i++) {
      if (id.indexOf(data[i]) == -1) {
        id.push(data[i]);
      }
    }
    localStorage.setItem(key, JSON.stringify(id));
  }

  array = [];
  arrayTwo = ["1", "2"];
  fieldOptions = [
    {
      id: "1",
      type: "I_am_RED",
      displayKey: "I_am_RED"
    },
    {
      id: "5",
      type: "I_am_RED",
      displayKey: "I_am_RED"
    },
    {
      id: "2",
      type: "I_am_BLUE",
      displayKey: "I_am_BLUE"
    },
    {
      id: "3",
      type: "I_am_BLUE",
      displayKey: "I_am_BLUE"
    },
    {
      id: "4",
      type: "I_am_GREEN",
      displayKey: "I_am_GREEN"
    }
  ];

  ngOnInit() {
    const key = "item";
    this.array = JSON.parse(localStorage.getItem(key));
    console.log("get storage", this.array);

    for (const item of this.array) {
      let obj = this.fieldOptions.find(o => o.id === item);
      console.log("Array Object result getting local storage", obj);
    }

    for (const item of this.arrayTwo) {
      let obj = this.fieldOptions.find(o => o.id === item);
    }
  }
}

循环遍历本地存储数组 returns undefined

Looping through a local storage array returns undefined

javascript

local-storage

typescript

angular