[英]Typescript (Angular) - JSON model Deserialisation
I would like to add and populate additional fields (which are not sent by backend service) in my http model.我想在我的 http model 中添加和填充其他字段(不是由后端服务发送的)。 Catch is that I am not able to populate (map) those fields in the place where http response is being received since I am using internal framework.
问题是我无法在收到 http 响应的地方填充(映射)这些字段,因为我使用的是内部框架。
Is there a possibility in Typescript (Angular) to somehow override JSON Deserialisation flow/Instance creation and populate mentioned fields. Typescript(Angular)中是否有可能以某种方式覆盖 JSON 反序列化流/实例创建并填充提到的字段。 For example:
例如:
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) */
}
You need a HttpInterceptor , in which you can manipulate data.您需要一个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);
}
}
Read more about it in the tutorials: https://angular.io/api/common/http/HttpInterceptor在教程中了解更多信息: https://angular.io/api/common/http/HttpInterceptor
I have asked you for the especific names of your services.我已向您询问了您的服务的具体名称。
But, in the meantime, I give you a 'general' answer to your question.但是,与此同时,我给你一个“一般”的回答你的问题。 You just need to do this:
你只需要这样做:
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 });
This above, only works for a rapid test.以上仅适用于快速测试。 If you want to do somethig more 'elaborated', you could transform your interface into a class, and add your calculated attribute, something like this:
如果您想做一些更“详细”的事情,您可以将您的界面转换为 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;
}
And for using it, just:为了使用它,只需:
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 });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.