Typescript (Angular) - JSON model 反序列化

Question

我想在我的 http model 中添加和填充其他字段（不是由后端服務發送的）。 問題是我無法在收到 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 });

以上僅適用於快速測試。 如果您想做一些更“詳細”的事情，您可以將您的界面轉換為 class，並添加您的計算屬性，如下所示：

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