时间戳

首页 > 解决方案 > angular/REST-application 中的 ngx-mat-datetime-picker 不会使用自定义 DateAdapter 更新值

angular - angular/REST-application 中的 ngx-mat-datetime-picker 不会使用自定义 DateAdapter 更新值

问题描述

我正在尝试在 angular.io 应用程序中使用带有自定义日期适配器的ngx-mat-datetime- picker，基于此gist。我的应用程序与 REST-API 对话，该 API 具有格式为 datetime 字段的元素2020-01-08T01:02:03.000Z。

{ "idxdevice": 123, "devname": "test", "devoutdated": "2020-05-01T09:42:27.281Z" }

检索元素后，我将其转换为detail-componentget() 方法中的 JavaScript-Date-Element：

get(): void {
  const idxdevice = +this.route.snapshot.paramMap.get('idx');
  this.deviceService.getDevice(idxdevice).subscribe(device => {        
    this.device = device;
    this.device.devoutdated = new Date(device.devoutdated)
  });
}

我在前端的输入字段如下所示：

<mat-form-field class="detail-form-field">
  <mat-label>Outdated since</mat-label>
  <input matInput [ngxMatDatetimePicker]="datetimepicker" [value]="device.devoutdated" (input)="device.devoutdated = $event.target.value" />
  <mat-datepicker-toggle matSuffix [for]="datetimepicker"></mat-datepicker-toggle>
  <ngx-mat-datetime-picker #datetimepicker></ngx-mat-datetime-picker>
</mat-form-field>

日期适配器的 DATE_FORMAT 如下所示

export const MAT_DATE_FNS_DATE_FORMATS = {
  parse: {
    dateInput: 'dd.MM.yyyy HH:mm:ss',
  },
  display: {
    dateInput: 'dd.MM.yyyy HH:mm:ss',
    monthYearLabel: 'LLL y',
    dateA11yLabel: 'MMMM d, y',
    monthYearA11yLabel: 'MMMM y',
  }
};

如果我打开浏览器，输入字段中的结果与预期的一样。现在，如果我通过 datepicker 更改输入字段中的日期时间（实际上，通过键盘更改值会清空输入字段，并且不会让我插入任何内容，有时只能插入一个数字），返回服务器的 PUT 请求包含“上一个”日期时间，而不是我在输入字段中选择的日期时间。

从我的角度来看，devoutdated-field 不会在更改日期时更新（但它适用于其他字段，例如devname）。我的第一个猜测是它与在与 API 对话时应转换回字符串的日期字段有关。但另一方面，我认为这是另一个问题，与字段更新无关，应该由日期适配器覆盖。

任何建议是什么导致了这个问题？

标签： angularangular-materialdatetimepickerdate-fns

解决方案

推荐阅读