Angular中如何将localStorage存储的JSON转换为数组供ngFor遍历

第一步：file2.ts 中定义类型并读取 localStorage 数据 #

首先需要先明确menuGroups的 TypeScript 类型，同时要避免直接在类属性声明阶段读取 localStorage，推荐在ngOnInit生命周期钩子中执行读取逻辑，同时做好空值和解析异常兜底：

// 首先根据你实际的menuGroups数据结构定义接口，可自行调整字段
interface MenuItem {
  id: number;
  name: string;
  url?: string;
  icon?: string;
  children?: MenuItem[];
}

export class File2Component implements OnInit {
  // 类级别声明数组，初始值设为空数组兜底
  menuGroups: MenuItem[] = [];

  ngOnInit(): void {
    // 读取localStorage存储的字符串
    const storedMenu = localStorage.getItem('menuGroups');
    if (!storedMenu) return;

    try {
      // 解析JSON字符串后赋值
      this.menuGroups = JSON.parse(storedMenu) as MenuItem[];
    } catch (err) {
      // 解析异常时兜底，避免页面崩溃
      console.error('菜单数据解析失败：', err);
      this.menuGroups = [];
    }
  }

  // 可选：ngFor遍历优化用的trackBy方法，提升渲染性能
  trackByMenuId(index: number, item: MenuItem): number {
    return item.id;
  }
}

第二步：file2.html 中使用ngFor遍历 #

遍历前不需要额外判断非空，因为我们已经给menuGroups设置了空数组作为初始值：

<div *ngFor="let group of menuGroups; trackBy: trackByMenuId">
  <!-- 渲染一级菜单字段 -->
  <span>{{ group.name }}</span>
  <!-- 如果有二级子菜单可嵌套遍历 -->
  <div *ngFor="let child of group.children" style="padding-left: 16px">
    <span>{{ child.name }}</span>
  </div>
</div>

常见报错原因说明 #

你之前遇到的报错通常是以下几个问题导致的：

• 直接在类属性声明时读取localStorage，部分场景下（如SSR、页面初始加载阶段）localStorage不可访问导致报错
• 未执行JSON.parse，直接将localStorage取出的字符串赋值给数组，ngFor无法遍历字符串
• 未做空值兜底，localStorage不存在对应key时取到null，赋值给数组触发类型不匹配报错
• 未声明明确的TypeScript类型，触发类型校验错误

内容的提问来源于stack exchange，提问作者Dev