Rxjs - 从 json 映射到 typescript 接口答案

【问题标题】：Rxjs - Mapping from json to typescript interfaceRxjs - 从 json 映射到 typescript 接口
【发布时间】：2018-08-31 23:36:09
【问题描述】：

所以，当我一直在探索这个新空间时，我需要进行 Web API 调用。在所有内容的版本之间存在很多混淆。无论如何，我发现了一些可行的方法，而且我知道“最佳实践”有点过于主观。但是，我不知道是否有更直接的方式来做到这一点。

这是我正在寻找的响应格式：

export interface AuditDetail {
  updatedAt: Date;
  updatedBy: string;
}

这是服务器端模型：

[DataContract]
public class PlanHistory
{
    [Key]
    public int Id { get; set; }

    [DataMember]
    [MaxLength(50)]
    public string UpdatedBy { get; set; }

    [DataMember]
    public DateTime UpdatedAt { get; set; }
}

这是我的 Angular 服务：

getAuditDetails(planId: number, fieldName: string, fieldValue: string): Observable<AuditDetail> {
    //return of({ updatedAt: new Date(), updatedBy: "Hawchorn" }); //Tooltip displays data

    interface PlanHistory    //Created because couldn't figure out how to directly map from Json to an Audit Detail. 
    {
      UpdatedAt: Date;
      UpdatedBy: string;
    }

    this.log("Retrieving Audit Details");
    return this.http
      .get<PlanHistory>(this.webApiUrl +
        "PlanHistories?planId=" +
        planId +
        "&fieldName=" +
        fieldName +
        "%20&fieldValue=" +
        fieldValue).pipe(map((response: PlanHistory) => {
          return <AuditDetail>{ updatedAt: response.UpdatedAt, updatedBy: response.UpdatedBy };
      }));
  }

那有效。但我讨厌制作那个中间接口。

那么我该如何做同样的事情，直接从 JSON 到 AuditDetail？

【问题讨论】：

您需要在模型中具有相同名称的变量，才能不使用地图。

标签： angular typescript rxjs

【解决方案1】：

您希望 Web API 返回 camelCasing 输出，因此您不必更改大小写。见JSON and XML Serialization in ASP.NET Web API：

使用驼峰式大小写编写 JSON 属性名称，而无需更改您的数据模型，设置CamelCasePropertyNamesContractResolver 序列化器：
var json = GlobalConfiguration.Configuration.Formatters.JsonFormatter;
json.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();

那么你的代码就变成了：

getAuditDetails(planId: number, fieldName: string, fieldValue: string): Observable<AuditDetail> {
    this.log("Retrieving Audit Details");
    return this.http
        .get<AuditDetail>(`${this.webApiUrl}PlanHistories?planId=${planId}&fieldName=${fieldName}%20&fieldValue=${fieldValue}`);
}

【讨论】：

【解决方案2】：

应该推断映射，唯一的区别是你的大小写，你不能更新以使名称匹配吗？

【讨论】：

在这种情况下是肯定的，但我想了解如果我真的必须映射一些东西。但除此之外，UI 项目的所有 外壳都是驼色的。并且 web 服务中的每个属性都使用 PascalCase。我不想打破常规，也不想做那种范围的重构。