Typescript (Angular) - JSON 模型反序列化

Posted 2023-02-19

【中文标题】Typescript (Angular) - JSON 模型反序列化

【英文标题】：Typescript (Angular) - JSON model Deserialisation

【发布时间】：2022-01-06 11:21:01

【问题描述】：

我想在我的 http 模型中添加和填充其他字段（不是由后端服务发送的）。 问题是我无法在收到 http 响应的地方填充（映射）这些字段，因为我使用的是内部框架。

Typescript (Angular) 中是否有可能以某种方式覆盖 JSON 反序列化流程/实例创建并填充提到的字段。例如：

interface ElectricDevice 
    
    energy_meter_start: number; // received from backend service
    energy_meter_stop: number; // received from backend service

    energy_spent: number; // not received by backend service, but needs to be populated as energy_meter_stop - energy_meter_start

    // ...

    /* I would like to somehow populate energy_spent as energy_meter_stop-energy_meter_end on instance creation (deserialisation) */

【问题讨论】：

您能否补充您的问题，您是如何进行 http 调用的？或者至少是您订阅进行 http 调用的服务时的部分。谢谢！

【参考方案1】：

您需要一个HttpInterceptor，您可以在其中操作数据。

@Injectable()
export class CustomJsonInterceptor implements HttpInterceptor 
  constructor(private jsonParser: JsonParser) 

  intercept(httpRequest: HttpRequest<any>, next: HttpHandler) 
    if (httpRequest.responseType === 'json') 
      // If the expected response type is JSON then handle it here.
      return this.handleJsonResponse(httpRequest, next);
     else 
      return next.handle(httpRequest);
    
  

在教程中了解更多信息：https://angular.io/api/common/http/HttpInterceptor

【参考方案2】：

我已询问您服务的具体名称。

但是，与此同时，我给你一个“一般”的回答你的问题。 你只需要这样做：

this.yourService.yourGetElectriceDevices
.pipe(
   map (_resp: ElectricDevice  => _resp.energy_spent = _resp.energy_meter_stop - _resp.energy_meter_start
)
.subscribe( resp =>  //your treatment to the response );

以上内容仅适用于快速测试。 如果您想做一些更“详细”的事情，您可以将您的界面转换为一个类，并添加您的计算属性，如下所示：

export interface ElectricDevice 
    
    energy_meter_start: number; // received from backend service
    energy_meter_stop: number; // received from backend service
  


export Class ElectricDeviceClass 

energy_meter_start: number;
energy_meter_stop: number;

energy_spent: number; 


constructor (data: ElectricDevice)  
   this.energy_meter_start = data.energy_meter_start;
   this.energy_meter_stop= data.energy_meter_stop;

   this.energy_spent = this.energy_meter_stop - this.energy_meter_start;

为了使用它，只需：

import  ElectricDeviceClass, ElectricDevice  from './../model/...' // There where you have yours interfaces and model classes

this.yourService.yourGetElectriceDevices
.pipe(
   map (_resp: ElectricDevice  => new ElectricDeviceClass(_resp)
)
.subscribe( resp =>  //your treatment to the response );

【讨论】：

不幸的是，正如我所提到的，我正在使用特定的内部框架来处理 http 层，因此我无法执行建议的转换。我只能在模型级别上做一些有意义的事情。