Форматирование переменной Joda LocalDateTime с помощью библиотеки Js Joda в Angular 10
Доброе утро,
У меня есть приложение Angular 10, в котором я пытаюсь распечатать некоторые переменные LocalDateTime на странице HTML. Переменная LocalDateTime правильно извлекается из BackEnd и имеет тип 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 библиотека, чтобы обернуть переменные.
В HTML всю переменную LocalDateTime нельзя было напечатать с помощью интерполяции как
[Object Object] печатается вместо значения переменной, поэтому
{{data_start_act}} не работает, но я могу распечатать поля внутри него с помощью интерполяции, например
{{data_start_act.year}} или же
{{data_start_act.dayOfMonth}} Работа.
Поэтому я попытался отформатировать его с помощью
DateTimeFormatter класс библиотеки JsJoda, объявленный как локальная переменная в компоненте следующим образом:
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 не выдает ошибок во время компиляции.
Теперь вопрос: что-то не так в том, что я делаю? Есть ли альтернатива отображению Joda LocalDateTime в виде строки в шаблоне Angular HTML, который не подразумевает использование средства форматирования (метод toString не работает)?
1 ответ
Я столкнулся с той же проблемой и теперь знаю, что вызвало это у меня.
Когда я получил свой ответ JSON, я подумал, что он правильно приведен к правильному типу, т.е.
LocaTimeот
@Joda-js/coreкогда на самом деле мои данные сортировались как .
Это немного сбивало с толку, так как я создал собственный канал для форматирования времени суток, а также явно указал в качестве аргумента функции, что при передаче
stringвместо
LocalTime.