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

Question

我想在http模型中添加并填充其他字段(这些字段不是由后端服务发送的(Catch是我无法在接收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) */
}

Answer 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

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