在Angular 10中使用Js Joda Library格式化Joda LocalDateTime变量

问题描述

早上好

我有一个Angular 10应用程序，其中尝试在HTML页面中打印一些LocalDateTime变量。 从后端正确获取了LocalDateTime变量，并且该变量的类型为Joda.LocalDateTime，因为可以在邮递员的响应字段中看到该变量，所以序列化正确进行，例如：

"data_start_act": {
    "year": 2020,"dayOfMonth": 19,"chronology": {
        "zone": {
            "fixed": true,"id": "UTC"
        }
    },"dayOfWeek": 6,"dayOfYear": 263,"era": 1,"weekyear": 2020,"centuryOfEra": 20,"monthOfYear": 9,"weekOfWeekyear": 38,"yearOfEra": 2020,"yearOfCentury": 20,"millisOfSecond": 0,"secondOfMinute": 0,"minuteOfHour": 0,"hourOfDay": 0,"millisOfDay": 0,"fields": [
        {
            "lenient": false,"leapDurationField": {
                "unitMillis": 86400000,"precise": true,"name": "days","type": {
                    "name": "days"
                },"supported": true
            },"rangeDurationField": null,"minimumValue": -292275054,"maximumValue": 292278993,"durationField": {
                "unitMillis": 31556952000,"precise": false,"name": "years","type": {
                    "name": "years"
                },"name": "year","type": {
                "durationType": {
                    "name": "years"
                },"rangeDurationType": null,"name": "year"
            },"supported": true
        },{
            "lenient": false,"rangeDurationField": {
                "unitMillis": 31556952000,"minimumValue": 1,"maximumValue": 12,"durationField": {
                "unitMillis": 2629746000,"name": "months","type": {
                    "name": "months"
                },"name": "monthOfYear","type": {
                "durationType": {
                    "name": "months"
                },"rangeDurationType": {
                    "name": "years"
                },"name": "monthOfYear"
            },{
            "rangeDurationField": {
                "unitMillis": 2629746000,"maximumValue": 31,"lenient": false,"unitMillis": 86400000,"durationField": {
                "unitMillis": 86400000,"name": "dayOfMonth","type": {
                "durationType": {
                    "name": "days"
                },"rangeDurationType": {
                    "name": "months"
                },"name": "dayOfMonth"
            },"supported": true,"leapDurationField": null
        },{
            "range": 86400000,"rangeDurationField": {
                "unitMillis": 86400000,"maximumValue": 86399999,"unitMillis": 1,"durationField": {
                "name": "millis","type": {
                    "name": "millis"
                },"precise": true
            },"minimumValue": 0,"name": "millisOfDay","type": {
                "durationType": {
                    "name": "millis"
                },"rangeDurationType": {
                    "name": "days"
                },"name": "millisOfDay"
            },"leapDurationField": null
        }
    ],"fieldTypes": [
        {
            "durationType": {
                "name": "years"
            },"name": "year"
        },{
            "durationType": {
                "name": "months"
            },"rangeDurationType": {
                "name": "years"
            },"name": "monthOfYear"
        },{
            "durationType": {
                "name": "days"
            },"rangeDurationType": {
                "name": "months"
            },"name": "dayOfMonth"
        },{
            "durationType": {
                "name": "millis"
            },"rangeDurationType": {
                "name": "days"
            },"name": "millisOfDay"
        }
    ],"values": [
        2020,9,19,0
    ]
}

在Angular组件中导入了@js-joda/core库以包装变量。

在HTML中，无法通过使用插值来打印整个LocalDateTime变量，因为打印了[Object Object]而不是变量值，所以{{data_start_act}}不起作用，但是我可以在其中打印字段使用插值，例如{{data_start_act.year}}或{{data_start_act.dayOfMonth}}的工作。

因此，我尝试使用JsJoda库的DateTimeFormatter类对其进行格式化，该类通过以下方式在组件中声明为局部变量：dateTimeFormatter: DateTimeFormatter = DateTimeFormatter.ofPattern('d M y');。

特别用于：

格式化程序功能

  stringifyLocalDateTime(date: LocalDateTime): string {
    return this.dateTimeFormatter.format(date);
  }

HTML文件中的插值指令

{{stringifyLocalDateTime(lotto.data_start_act)}}

这样，我最终会在控制台中登录时出错：

core.js:4197 ERROR TypeError: this._temporal.getLong is not a function
    at DateTimePrintContext.getValue (js-joda.esm.js:3888)
    at NumberPrinterParser.print (js-joda.esm.js:5023)
    at CompositePrinterParser.print (js-joda.esm.js:4742)
    at DateTimeFormatter._formatTo (js-joda.esm.js:6897)
    at DateTimeFormatter.format (js-joda.esm.js:6887)
    at ListaBatchAnnualeComponent.stringifyLocalDateTime (lista-batch-annuale.component.ts:63)
    at ListaBatchAnnualeComponent_div_18_div_12_Template (lista-batch-annuale.component.html:127)
    at executeTemplate (core.js:7303)
    at refreshView (core.js:7172)
    at refreshEmbeddedViews (core.js:8280)

通过搜索网络，我找不到遇到相同或相似问题的任何人。 Angular在编译时不会给出错误。

现在的问题是：我的工作有问题吗？还有一种方法可以在Angular HTML模板中将Joda LocalDateTime显示为字符串，这并不意味着使用格式化程序（toString方法不起作用）？

解决方法

我遇到了同样的问题，现在知道是什么原因造成的。

当我收到响应 JSON 时，我认为它被正确地转换为正确的类型，即 LocaTime 中的 @Joda-js/core，而实际上我的数据被编组为 string。

这有点令人困惑，因为我创建了一个自定义管道来格式化一天中的时间，并且还明确地声明 LocalTime 作为函数的参数，传递 {{1} } 而不是 string。