为什么我不能在我的 Angular 应用程序中使用 MomentJS 向日期添加年份？

问题描述

我正在开发一个 Angular 应用程序，尝试使用 momentJS 向日期添加特定的年数，但似乎不起作用。

这是我的代码：

changeGuaranteeEndDate(guaranteeDuration) {
    console.log("changeGuaranteeEndDate() START");
    console.log("GUaraNTEE START DATE: " + this.newAssetForm.value.guarantee_start_date);
    console.log("GUaraNTEE DURATION: " + this.newAssetForm.value.guarantee_duration);
    console.log("EVENT VAL: " + guaranteeDuration);

    this.newAssetForm.value.guarantee_duration = guaranteeDuration;
    console.log("GUaraNTEE DURATION: " + this.newAssetForm.value.guarantee_duration);

    let myMoment: moment.Moment = moment(this.newAssetForm.value.guarantee_start_date);
    console.log("myMoment: ",myMoment);

    let myMoment2 = myMoment;
    myMoment2.add(3,'y')

    console.log("myMoment2: ",myMoment2);
}

所以基本上我是从定义到 this.newAssetForm.value.guarantee_start_date 的日期开始创建 myMoment 对象。

然后，我尝试从 myMoment 开始创建一个新的 myMoment2 对象，并为此对象添加 3 年。最后我打印了

问题是在 Chrome 控制台中我获得了以下输出：

myMoment:  
Moment {_isAMomentObject: true,_i: Fri Jan 29 2021 13:04:29 GMT+0100 (Ora standard dell’Europa centrale),_isUTC: false,_pf: {…},_locale: Locale,…}
_d: Mon Jan 29 2024 13:04:29 GMT+0100 (Ora standard dell’Europa centrale) {}
_i: Fri Jan 29 2021 13:04:29 GMT+0100 (Ora standard dell’Europa centrale) {}
_isAMomentObject: true
_isUTC: false
_isValid: true
_locale: Locale {_calendar: {…},_longDateFormat: {…},_invalidDate: "Invalid date",_dayOfMonthOrdinalParse: /\d{1,2}(th|st|nd|rd)/,ordinal: ƒ,…}
_pf: {empty: false,unusedTokens: Array(0),unusedInput: Array(0),overflow: -2,charsLeftOver: 0,…}
__proto__: Object

myMoment2:  
Moment {_isAMomentObject: true,…}
__proto__: Object

问题在于，正如您在之前的输出中所看到的，似乎年份没有添加到原始myMoment 对象中。

我的代码有什么问题？我错过了什么？如何将年份正确添加到原始 myMoment 对象中？

解决方法

好的，你需要 format() 来显示 moment 对象的值。基本上问题是你传递给它的初始值。在此 answer 中阅读更多相关信息。所以你的最后一个控制台日志应该是这样的：

console.log("myMoment2: ",myMoment2.format());

它对我有用....您可以点击下面的 Run code Snippet 进行测试。

您可以尝试使用与我的示例相同的加载库：src moment.min.js

function changeGuaranteeEndDate(guaranteeDuration) {
    console.log("changeGuaranteeEndDate() START");
    console.log("GUARANTEE START DATE: " + this.newAssetForm.value.guarantee_start_date);
    console.log("GUARANTEE DURATION: " + this.newAssetForm.value.guarantee_duration);
    console.log("EVENT VAL: " + guaranteeDuration);

    this.newAssetForm.value.guarantee_duration = guaranteeDuration;
    console.log("GUARANTEE DURATION: " + this.newAssetForm.value.guarantee_duration);

    let myMoment = moment(this.newAssetForm.value.guarantee_start_date);

    console.log("myMoment: ",myMoment);

    let myMoment2 = myMoment;
    myMoment2.add(3,'y')

    console.log("myMoment2: ",myMoment2);
}

// This is just for Testing the function... and mocking object
changeGuaranteeEndDate.apply({
  newAssetForm:{
    value:{
      guarantee_start_date:new Date(),guarantee_duration:undefined
    }
  }
})

<script       src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

angular angular angular-moment javascript momentjs