将模型从 Angular 6 提交到 Web API 后，日期变得晚了一 (1) 天

Question

我正在使用 Angular 6 和 PrimeNG 前端开发控件和 ASP.Net Web API 和 SQL 服务器 用于后端开发。

在我的一个表单中，有两个 PrimeNG Calender 控件用于将开始日期和结束日期保存到数据库中。提交表单后，收集所有表单字段以填充 object/model 并将此模型传递到 Web API。 object/model 使用 Typescript 代码填充在 Angular 6 中。下面是我在 Typescript 代码中的前端模型：

export class MyPackage {
    public PackageId: number;
    public PackageUid: number;
    public PackageName: string;
    public PackageDesc: string;
    public ValidFrom: Date;
    public ValidTill: Date;
    public CreatedOn: Date;
}

这是我使用 Angular 6 和 typescript 的对象初始化过程：

let pakg = new MyPackage();
pakg.PackageName = this.packageAddForm.controls["packageName"].value;
pakg.PackageDesc = this.packageAddForm.controls["packageDesc"].value;
pakg.ValidFrom = this.packageAddForm.controls["dateFrom"].value;
pakg.ValidTill = this.packageAddForm.controls["dateEnd"].value;

现在的问题是当模型被传递到 Web 时 API，From Date 和 End Date 值变得少了 1 天 我不知道为什么.我已经调试了我的 Angular 6 代码，看到它通过了我选择的确切日期，但是当这个模型到达 Web API 时，日期变得晚了 1 天。

谁能描述一下为什么会出现这个问题以及如何解决这个问题？

Answer 1

一个可能的罪魁祸首是客户端和服务器之间的时区偏移。

当通过 Angular HTTP 客户端发送 JavaScript 日期时，使用 JSON.stingify() 方法将数据转换为 JSON 字符串。这个converts all dates into strings using ISO 8601 format，像这样：

YYYY-MM-DDTHH:mm:ss.sssZ

此格式的一个令人困惑的方面是末尾字母 Z 的用途，它代表 Zulu，或零 UTC 时区偏移量。

当日期转换为该字符串时，数值时间值实际上被修改为反映无时区偏移，而不是客户端的时区偏移。这是为了在服务器处于不同时区的情况下规范化实际时间。

重要的是确保 Web API 设置为根据零 UTC 偏移量解释时间的字符串值表示。

Answer 2

要解决此问题，您需要将日期转换为 "MM/DD/YYYY" 格式，

在 Angular 应用程序的 .ts 文件中按照以下步骤操作，

1) 像

一样导入 DatePipe

import { DatePipe } from '@angular/common';

2) 在构造函数中添加以下内容

private datePipe: DatePipe

3) 使用 transform 转换日期，

this.StartDate = this.datePipe.transform(this.todayDate, 'MM/dd/yyyy');

注意：日期变量应该是任何类型。

Answer 3

angular 客户端更改 HTTP 请求的负载日期格式。我解决了我的问题，将其添加到我的模块提供商中：

{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }, /* optional */
{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },

并像这样导入：

import {MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
import { MAT_DATE_LOCALE } from "@angular/material/core";

最后将其添加到您的模块导入部件和自动导入中

import: [MatDatepickerModule,MatMomentDateModule]

你的问题也解决了，希望 :)

Answer 4

我有一个格式为 'DD/MM/YYY' 的字符串，在将其发送到 WebApi 服务器之前，我必须将其转换为 Date 类型。所以我使用 moment.js 库将它转换为 UTC 日期。

Angular 发送日期类型请求字段。 WebApi (c#) 得到了 DateTyme 类型的请求字段。 Day-reduced 问题解决:)

这是我对字符串“26/01/2005”的代码：

moment.utc("26/01/2005", "DD/MM/YYYY").toDate()

要通过 npm 安装 moment.js，请使用：

npm install moment --save

有关 moment.js 的更多详细信息，您可以在 https://momentjs.com/

中找到

Answer 5

我的时区是 GMT +6:00（孟加拉国时间）。在同样的情况下，我的问题通过使用这样的时刻格式解决了。

moment().format('YYYY-MM-DDThh:mm:ssZ');

使用内部 Angular:

    import * as moment from 'moment';

    currentDate : any = moment().format('YYYY-MM-DDThh:mm:ssZ');
    
    ngOnInit() {
      console.log(this.currentDate);
    }

输出：

2022-03-22T12:31:47+06:00

要通过 npm 安装 moment.js，请使用：

npm install moment --save

将模型从 Angular 6 提交到 Web API 后，日期变得晚了一 (1) 天

Date becomes one (1) day behind after submitting model from Angular 6 to Web API

datetime

asp.net-web-api2

angular6