0

早上好，

我有一个 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"
                },
                "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
    ]
}

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

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

所以我尝试使用DateTimeFormatterJsJoda 库的类对其进行格式化，以这种方式在组件中声明为局部变量：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 方法不起作用）？

4

1 回答 1

1

I happened across the same issue and know what caused it for me now.

When I got my response JSON, I thought it was being correctly cast to the correct type ie LocaTime from the @Joda-js/core when in fact my data was being marshalled as string.

It was a little baffling as I had created a custom pipe for formatting the time of day, and also explicitly stating LocalTime as the argument for the function, no errors were being thrown about passing a string instead of a LocalTime.

于 2021-01-03T19:36:24.997 回答