Question

我的项目包含许多日期字段。 Post请求Api的时间，服务器所需的格式是＆＃34; YYYY-MM-DD＆＃34; 但我希望在UI中显示的格式为＆＃34; DD-MM-YYYY＆＃34;

我熟悉时刻库及其功能，可以将日期更改为字符串，反之亦然，以及其他功能。

我不想为每个日期字段执行转换过程。 （按时刻库改变组件）。

有没有我可以达到我的要求。

我的输入与文本字符串

绑定没有问题

在UI处应显示：DD-MM-YYYY

字符串的后期格式应为：YYYY-MM-DD

限制：

我无法在我的模态中定义新的Object。但是吸气者和制定者都是允许的。

Answer 1

主要思想是HttpInterceptors。

拦截器层位于UI逻辑和后端之间。您可以在其中转换请求参数和响应数据。

示例：

转换请求ref
处理回复的示例：ref

现在，只需处理此级别的数据。

关于如何处理它的想法：

递归传递您的对象并使用momentjs lib更改日期格式
使用JSON.parse(JSON.stringify(<object>))方法

可能是第二个更快，但这取决于您的具体情况。

使用JSON.stringify时可以指定替换功能。您可以在reference中找到更详细的解释。所以你可以传递替换器功能并在那里替换你的日期。

无论如何，您需要以某种方式检测到您需要更改该属性的日期格式。您可以使用regexps执行此操作。

Answer 2

我设法提出了这个拦截器，它将javascript Date对象更改为字符串。

import { HttpEvent, HttpHandler, HttpRequest } from "@angular/common/http";
import { Injectable } from '@angular/core';
import * as _ from 'lodash';
import { Observable } from "rxjs/Observable";
import { DateService } from '../../shared/services/date/date.service';

@Injectable()
export class RequestInterceptor {

  constructor(private _dateService: DateService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let body;

    if (req.responseType !== 'json' || !req.body ||
      (req.method !== 'POST' && req.method !== 'PUT')) {
      return next.handle(req);
    }

    if (_.isArray(req.body)) {
      body = Object.assign([], req.body);
    } else {
      body = Object.assign({}, req.body);
    }

    this.changeRequest(body);
    let reqClone = req.clone({ body });
    return next.handle(reqClone);
  }

  private changeRequest(body) {
    if (body && typeof body === 'object') {
      Object.entries(body).forEach(
        ([key, value]) => {
          if (typeof value !== 'string' && _.size(value)) {
            this.changeRequest(value);
          } else if (Object.prototype.toString.call(value) === '[object Date]') {
            body[key] = this._dateService.toString(value);
          }
        }
      );
    }
  }

}

我还使用片刻创建一个简单的DateService：

import { Injectable } from '@angular/core';
import * as moment from 'moment';
import 'moment/locale/en-gb';

@Injectable()
export class DateService {

  constructor() {
    moment.locale('en-gb');
  }

  toString(date: any, format: string = 'YYYY-MM-DD HH:mm:ss'): string {
    return date !== null ? moment(date).format(format) : null;
  }

}

我希望这会有所帮助。

自动转换后API的日期字符串格式

2 个答案: