Question

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

REST API中的JSON：

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

角度模型：

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

Answer 1

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

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;
        });
    });

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

1 个答案: