Question

我有一个带字典的json文件，从字符串映射到自定义类（最初用python编写）。我试图以角度加载此对象并显示它：

自定义对象：

export interface IFaculty {
  code: string;
  name: string;
  courses: Array<string>;
}

将对象加载为observable（在service.ts中）：

getFaculties(): Observable<Map<string, IFaculty>> {
  return this.http.get<Map<string, IFaculty>>('../../assets/json/faculties.json').pipe(
  catchError(this.handleError('getFaculties', new Map<string, IFaculty>())));
}

订阅并设置组件中的对象：

getFaculties(): void {
  this.facultyService.getFaculties().subscribe(dict => this.faculties = dict);
}

我无法迭代地图，只能按键，所以我使用了在SO上找到的辅助函数：

getKeys(map) {
  return Array.from(map.keys());
}

然后我要打印地图中的所有键（在html文件中）：

<div>
  <table>
    <tr *ngFor="let fac of getKeys(faculties)">{{fac}}</tr>
  </table>
</div>

已解决： 但是我得到了10个错误： TypeError：无法读取属性＆＃39;键＆＃39;未定义的

我在表格元素中添加了*ngIf="faculties"，现在错误消失了。但是我仍然不明白为什么我需要检查返回的对象并构建一个新的地图（下面有buildMap），否则在尝试访问.keys()时会出错对象的方法。

有缺点的解决方法

在组件本身中，根据返回的值构建一个映射：

getFaculties_2(): void {
  this.facultyService.getFaculties_2().subscribe(dict => this.faculties_2 = 
  this.buildMap(dict));
}

buildMap(obj: object) {
  return Object.keys(obj).reduce((map, key) => map.set(key, obj[key]), new Map());
}

我无法弄清楚为什么存在差异 - 从服务返回的对象应该已经是地图，但是如果没有手动将其转换为地图，我就无法使用它。

以角度加载json文件到字典中并迭代

0 个答案: