Typescript嵌套字典访问异常问题求助

问题场景 #

尝试实现嵌套字典结构：将同模型对象数组转为名为skills的子字典，再存入museLibrary根字典，期望通过museLibrary.skills[对象键]访问数据。在Angular的ngOnInit中同时调用getSkills（异步从后端获取数据并填充museLibrary，内部可正常访问数据）和getSubjects（打印整个museLibrary能看到完整数据，但单独访问museLibrary.skills返回undefined，遍历子字典也出错）。

核心原因 #

1. 异步执行时机问题：getSkills中的数据请求是异步操作，ngOnInit中调用getSkills后立刻执行getSubjects，此时后端请求还未完成，museLibrary尚未被填充数据。而浏览器的console.log对于引用类型（如对象）会延迟解析其内容，导致打印时看起来有数据，但实际执行代码访问子项时，数据还未加载完成。
2. 代码笔误：两处语法错误导致访问失败：
   • getSkills中误写为this.museLibrary.skill[key]，正确应为this.museLibrary.skills[key]
   • getSubjects中使用Object.entries(book)遍历却未解构，且错误使用book.key访问属性，正确应使用Object.keys(book)遍历键，再用book[key]取值。

修正方案 #

1. 调整异步执行顺序 #

确保getSubjects在getSkills的异步请求完成后执行，可将其放入subscribe回调内：

ngOnInit(): void {
    this.getSkills();
}

getSkills(){
    this.skillService.getAllSkills().subscribe(data =>{
      this.gatherMuseLibrary("skills", data);
      // 数据填充完成后再执行getSubjects
      this.getSubjects();
      if (this.museLibrary.skills !== undefined){
        for (let key of Object.keys(this.museLibrary.skills)){
          // 修正笔误：skill -> skills
          let skill = this.museLibrary.skills[key];
          switch(skill.type){
            case "Coding": this.codingSkills.push(skill); break;
            case "Writing": this.writingSkills.push(skill); break;
            case "Living": this.lifeSkills.push(skill); break;
          }
        }
      }
    })
}

2. 修正getSubjects中的遍历错误 #

getSubjects(){
    console.log(this.museLibrary);
    console.log(this.museLibrary.skills);
    for (let bKey of Object.keys(this.museLibrary)){
        console.log(this.museLibrary[bKey]);
        let book = this.museLibrary[bKey];
        console.log(book);
        // 修正：用Object.keys遍历键，而非Object.entries
        for (let key of Object.keys(book)){
          // 修正：用book[key]访问对应值，而非book.key
          let value = book[key];
          console.log(`${key} -> ${value}`);
        }
    }
}

3. 进阶：用RxJS合并异步操作（若getSubjects也含异步请求） #

如果getSubjects本身也需要从后端获取数据，可使用forkJoin确保所有异步请求完成后再处理数据：

import { forkJoin } from 'rxjs';

ngOnInit(): void {
    forkJoin([
        this.skillService.getAllSkills(),
        // 假设subjectService.getAllSubjects()是getSubjects的异步请求
        this.subjectService.getAllSubjects()
    ]).subscribe(([skillsData, subjectsData]) => {
        this.gatherMuseLibrary("skills", skillsData);
        // 填充subjects数据
        this.gatherMuseLibrary("subjects", subjectsData);
        // 处理skills分类
        this.processSkills();
        // 执行getSubjects处理逻辑
        this.getSubjects();
    });
}

// 把原getSkills中的分类逻辑抽成单独方法
processSkills(){
    if (this.museLibrary.skills !== undefined){
        for (let key of Object.keys(this.museLibrary.skills)){
          let skill = this.museLibrary.skills[key];
          switch(skill.type){
            case "Coding": this.codingSkills.push(skill); break;
            case "Writing": this.writingSkills.push(skill); break;
            case "Living": this.lifeSkills.push(skill); break;
          }
        }
    }
}

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