angular - 如何在小写模型中处理大写 JSON 字段名称

Question

我是 Angular 新手，刚刚开始使用 Angular 6 开始我的第一个项目。我有一个 REST API，可以为我的应用程序提供数据。该服务和我的应用程序正在通信，结果按预期输出到控制台。问题是 Angular 的自动属性映射失败了； JSON 中的字段名称全部大写，而我的模型中的属性名称则不是。如何强制映射不区分大小写或手动创建字段映射？

来自 REST API 的 JSON:

[
    {
        "ID": 123456,
        "LOCATION_LISTING": "Place of Origin",
        "SCIENTIFIC_NAME": "Gavia Immer"
    }
]

Angular 模型:

export interface IThing {
  id: number;
  location_listing: string;
  scientific_name: string;
}

Answer 1

通过属性名称访问 JavaScript 对象属性区分大小写。您要么必须改变结果，要么重命名 ITing 接口(interface)上的属性，使它们变为大写。我建议您将它们设为大写。这样您在浏览器网络面板中看到的内容就会与您在源代码中看到的内容相匹配。

export interface IThing {
   ID: number;
   LOCATION_LISTING: string;
   SCIENTIFIC_NAME: string;
}

this.http.get<IThing[]>(...);

如果您确实希望它们小写。您需要改变结果，使键变为小写。

this.http.get<IThing[]>(...)
    .pipe(map((things) => {
        return things.map((thing)=> {
            const obj = {};
            Object.keys(thing).forEach((key)=>obj[key.toLowerCase()]=thing[key]);
            return obj;
        });
    });