如何从Firebase实时数据库获取嵌套JSON数据并构建下拉菜单？

看起来你的核心问题是递归解析Firebase的子分类数据，当前的snapShotToArray只处理了一级分类，没有深入解析subcategory节点，所以你打印menuList[0].subcategory的时候应该看到的是原始的Firebase对象而非结构化的MenuInfo数组。咱们一步步来解决：

第一步：修复数据转换方法，递归处理子分类 #

修改你的snapShotToArray函数，让它在遍历每个节点时，检查是否存在subcategory字段，如果有，就递归调用自身来转换子分类数据——因为Firebase返回的子分类是带节点键的对象，需要转成统一的数组结构：

snapShotToArray(snapShot): MenuInfo[] {
  let retArr: MenuInfo[] = [];
  snapShot.forEach(element => {
    let obj: MenuInfo = element.payload.val();
    obj.key = element.key;
    // 检查并递归转换子分类
    if (obj.subcategory) {
      // 将Firebase的子分类对象转成快照格式，再递归处理
      const subSnapshots = Object.entries(obj.subcategory).map(([key, val]) => ({
        payload: { val: () => ({ ...val, key }) }
      }));
      obj.subcategory = this.snapShotToArray(subSnapshots);
    }
    retArr.push(obj);
  });
  return retArr;
}

第二步：确保数据服务方法类型正确 #

你的getMenuList方法没问题，但可以补充类型定义让代码更严谨：

import { AngularFireDatabase } from '@angular/fire/compat/database';
import { Observable } from 'rxjs';

constructor(private fdb: AngularFireDatabase) {}

getMenuList(): Observable<any[]> {
  return this.fdb.list('category').snapshotChanges();
}

第三步：在Angular模板中渲染多级下拉菜单 #

现在数据已经正确结构化了，你可以用嵌套的*ngFor渲染级联下拉菜单。这里提供两种常见场景的示例：

场景1：嵌套显示子分类的下拉 #

<select>
  <option *ngFor="let category of menuList" [value]="category.key">
    {{ category.name }}
    <!-- 子分类下拉（仅当存在时显示） -->
    <select *ngIf="category.subcategory?.length">
      <option *ngFor="let sub of category.subcategory" [value]="sub.key">
        → {{ sub.name }}
      </option>
    </select>
  </option>
</select>

场景2：级联下拉（选主分类后显示对应子分类） #

<select [(ngModel)]="selectedMainCategory">
  <option *ngFor="let category of menuList" [value]="category">
    {{ category.name }}
  </option>
</select>

<!-- 子分类下拉仅在选中主分类且有子分类时显示 -->
<select 
  *ngIf="selectedMainCategory?.subcategory?.length"
  [(ngModel)]="selectedSubCategory"
>
  <option *ngFor="let sub of selectedMainCategory.subcategory" [value]="sub">
    {{ sub.name }}
  </option>
</select>

记得在组件里定义对应的变量：

selectedMainCategory: MenuInfo | null = null;
selectedSubCategory: MenuInfo | null = null;

验证数据转换结果 #

在订阅回调里打印完整的menuList，确认每个分类的subcategory都是MenuInfo[]类型：

getMenuList() { 
  this.dataService.getMenuList().subscribe(data => { 
    this.menuList = this.dataService.snapShotToArray(data); 
    console.log('完整菜单数据:', this.menuList);
    console.log('第一个分类的子分类:', this.menuList[0]?.subcategory); 
  }); 
}

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