Angular 5、HttpClient修改Date字段为UTC

Question

我在客户端有一个日期类型为属性的对象。当我尝试通过 HttpClient.post 将对象发送到服务器时，属性的值更改为 UTC 时区。

客户端的值是 2017 年 11 月 26 日星期日 00:00:00 GMT+0300（土耳其标准时间） 但是当它转到服务器时，更改为：25.11.2017 21:00:00

我如何控制它？

这是我的class。

export interface IBill {
   BillID : number;
   SubscriptionID:number;
   SiteID : number;
   SubscriptionName: string;
   Amount: number;
   Date: Date;
   PaymentDeadline: Date;
   Virtual: boolean;
   Portioned: boolean;
   Issuanced: boolean;
   FinancialTransactionComment : string;}

我在填写 ng-form 时创建了一个对象，然后调用以下 Http.post :

let bill = this.formData;
this.http.post(this.configuration.ServerWithApiUrl + url, bill , { headers: headers, withCredentials: true, observe: "response", responseType: 'text' })
        .map((response) => {
            return this.parseResponse(response);
        }).catch(
        (err) =>
            this.handleError(err));

Answer 1

我将日期、PaymentDeadline 的类型更改为字符串。

export interface IBill {
   BillID : number;
   SubscriptionID:number;
   SiteID : number;
   SubscriptionName: string;
   Amount: number;
   Date: string;
   PaymentDeadline: string;
   Virtual: boolean;
   Portioned: boolean;
   Issuanced: boolean;
   FinancialTransactionComment : string; }

并在发送到服务之前重写它们。

let bill = this.formData;
bill.Date = this.formData.Date.toLocaleString();
bill.PaymentDeadline = this.formData.PaymentDeadline.toLocaleString();

在这种情况下，时间将作为字符串发送 ("11/10/2017, 12:00:00 AM") 并且不会对 UTC 时区进行任何更改

Answer 2

使用 HttpInterceptor 修改 put/post 请求的请求正文。通过创建更正的日期对象递归更新所有日期字段。

示例代码：

@Injectable() export class UpdateDateHttpInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.startLoading();
    if (req.method === 'POST' || req.method === 'PUT') {
        this.shiftDates(req.body);
    }
  }

  shiftDates(body) {
    if (body === null || body === undefined) {
        return body;
    }

    if (typeof body !== 'object') {
        return body;
    }

    for (const key of Object.keys(body)) {
        const value = body[key];
        if (value instanceof Date) {
            body[key] = new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate(), value.getHours(), value.getMinutes()
                , value.getSeconds()));
        } else if (typeof value === 'object') {
            this.shiftDates(value);
        }
    }
  }

Answer 3

有点晚了，但是，Angular 内部使用 JSON.stringify 序列化 HttpRequest 主体（对象类型）。 JSON.stringify 将 JavaScript 日期转换为 ISO 字符串。要克服这个问题，可以使用一些第三方库（如 moment.js 格式函数）覆盖 Date.prototype.toJSON。

Date.prototype.toJSON = function() {
    return  moment(this).format();
}

这种方法的问题在于它会改变全局 Date 对象。或者，您可以创建一个函数来创建发送到服务器的代理对象。

export function prepareRequestBody(body: any): any {
    if (typeof body === 'object') {
        return new Proxy(body, {
            get(target, prop, receiver) {
                if (target[prop] instanceof Date) {
                    return moment(target[prop]).format();
                }
                return target[prop]
            }
        })
    }

    return body
}

Angular 5、HttpClient修改Date字段为UTC

Angular 5, HttpClient changes Date fields to UTC

date

angular

angular-httpclient