用Js Joda库在角10中格式化Joda LocalDateTime变量

Question

早上好,

我有一个角10应用程序，在这个应用程序中，我尝试在HTML页面中打印一些LocalDateTime变量。LocalDateTime变量从BackEnd中正确提取，并且类型为Joda.LocalDateTime，序列化的发生是正确的，因为我可以在postman的响应字段中看到变量，例如：

"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"
                },
                "supported": true
            },
            "name": "year",
            "type": {
                "durationType": {
                    "name": "years"
                },
                "rangeDurationType": null,
                "name": "year"
            },
            "supported": true
        },
        {
            "lenient": false,
            "leapDurationField": {
                "unitMillis": 86400000,
                "precise": true,
                "name": "days",
                "type": {
                    "name": "days"
                },
                "supported": true
            },
            "rangeDurationField": {
                "unitMillis": 31556952000,
                "precise": false,
                "name": "years",
                "type": {
                    "name": "years"
                },
                "supported": true
            },
            "minimumValue": 1,
            "maximumValue": 12,
            "durationField": {
                "unitMillis": 2629746000,
                "precise": false,
                "name": "months",
                "type": {
                    "name": "months"
                },
                "supported": true
            },
            "name": "monthOfYear",
            "type": {
                "durationType": {
                    "name": "months"
                },
                "rangeDurationType": {
                    "name": "years"
                },
                "name": "monthOfYear"
            },
            "supported": true
        },
        {
            "rangeDurationField": {
                "unitMillis": 2629746000,
                "precise": false,
                "name": "months",
                "type": {
                    "name": "months"
                },
                "supported": true
            },
            "minimumValue": 1,
            "maximumValue": 31,
            "lenient": false,
            "unitMillis": 86400000,
            "durationField": {
                "unitMillis": 86400000,
                "precise": true,
                "name": "days",
                "type": {
                    "name": "days"
                },
                "supported": true
            },
            "name": "dayOfMonth",
            "type": {
                "durationType": {
                    "name": "days"
                },
                "rangeDurationType": {
                    "name": "months"
                },
                "name": "dayOfMonth"
            },
            "supported": true,
            "leapDurationField": null
        },
        {
            "range": 86400000,
            "rangeDurationField": {
                "unitMillis": 86400000,
                "precise": true,
                "name": "days",
                "type": {
                    "name": "days"
                },
                "supported": true
            },
            "maximumValue": 86399999,
            "lenient": false,
            "unitMillis": 1,
            "durationField": {
                "name": "millis",
                "type": {
                    "name": "millis"
                },
                "supported": true,
                "unitMillis": 1,
                "precise": true
            },
            "minimumValue": 0,
            "name": "millisOfDay",
            "type": {
                "durationType": {
                    "name": "millis"
                },
                "rangeDurationType": {
                    "name": "days"
                },
                "name": "millisOfDay"
            },
            "supported": true,
            "leapDurationField": null
        }
    ],
    "fieldTypes": [
        {
            "durationType": {
                "name": "years"
            },
            "rangeDurationType": null,
            "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
    ]
}

在角分量中导入@js-joda/core库以包装变量。

在HTML中，不能使用插值打印整个LocalDateTime变量，因为[Object Object]是打印变量值而不是变量值的，因此{{data_start_act}}不能工作，但是我可以使用插值打印字段，例如{{data_start_act.year}}或{{data_start_act.dayOfMonth}}工作。

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

具体而言，它用于：

格式化程序函数

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

文件中的内插指令

{{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)

通过搜索网络，我找不到有同样问题或类似问题的人。编译时不按角度给出误差。

现在的问题是:我正在做的事情有什么问题吗？有一种方法可以将Joda LocalDateTime显示为角HTML模板中的字符串，这并不意味着使用格式化程序( toString不起作用的方法)？

Answer 1

我碰巧遇到了同样的问题，现在我知道是什么导致了这件事。

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

这有点令人费解，因为我已经创建了一个定制管道来格式化一天中的时间，并且还显式地将LocalTime声明为函数的参数，在传递string而不是LocalTime时没有抛出任何错误。