Использование DataTables с моментами в Angular 6 приводит к тому, что fn.dataTable.moment не является функцией - PullRequest
Новая
       10

Использование DataTables с моментами в Angular 6 приводит к тому, что fn.dataTable.moment не является функцией

0 голосов
/ 06 сентября 2018

так что я немного разочарован, поскольку эта проблема кажется такой простой, но, тем не менее, я не могу ее исправить.

Я использую DataTable (который работает отлично) - теперь я хочу сделатьстолбец, содержащий даты, сортируемые по немецкому формату даты dd.MM.yyyy.

Я нашел документацию на домашней странице datatables: https://datatables.net/blog/2014-12-18

Но когда я пытаюсь использовать плагин, он дает мнеэта ошибка: 

core.js:1673 ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_4__.fn.dataTable.moment is not a function
    at help.component.ts:82
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3815)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496)
    at ZoneTask.invoke (zone.js:485)
    at timer (zone.js:2054)

Моя установка выглядит следующим образом:

angular.json 

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.bundle.js",
  "node_modules/moment/min/moment.min.js",
  "node_modules/datatables.net/js/jquery.dataTables.js",
  "node_modules/datatables.net-plugins/sorting/datetime-moment.js",
  "node_modules/datatables.net-plugins/sorting/date-de.js"
]

component.ts 

import * as $ from "jquery";

// console.log(moment(new Date()).toJSON()); -> moment itself also works fine
// $.fn.dataTable.moment("dd.MM.yyyy");    -> Property 'moment' does not exist on type 'StaticFunctions'
($ as any).fn.dataTable.moment("dd.MM.yyyy"); //-> ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_4__.fn.dataTable.moment is not a function
//(jQuery as any).fn.dataTable.moment("dd.MM.yyyy"); -> no error but seems to have no effect
this.btTable = $("#bttable").DataTable({
  order: [[2, "desc"]],
  language: this.properties.getTableDeTableLocalizationFor("Betriebsmeldungen")
});

Надеюсьбольше не знаю, что попробовать.Кажется, есть какой-то веб-пакет?происходит волшебство, которого я не понимаю.

Например, где разница с использованием jQuery или импортированного $ в качестве псевдонима?Кажется, они ссылаются на разные экземпляры jQuery?

Так что, если бы кто-то мог указать мне правильное направление, я был бы очень благодарен!

Ответы [ 3 ]

0 голосов
/ 10 сентября 2018

Итак, я нашел корень этой проблемы.

Оказывается, мне не хватало этого импорта: 

import "datatables.net-plugins/sorting/datetime-moment";

После этого все заработало как положено!

Оглядываясь назад, сообщение jquery__WEBPACK_IMPORTED_MODULE_4__.fn.dataTable.moment is not a function должно быть той подсказкой, которая мне нужна, но почему-то я не установил соединение.

0 голосов
/ 05 октября 2018

по следующей ссылке: https://datatables.net/examples/advanced_init/html5-data-attributes.html Просто измените свой код, как показано ниже, и он будет работать: 

<td [attr.data-order]="data.createdDate">{{ data.createdDate | dateTimeFormat }}</td>
0 голосов
/ 06 сентября 2018

После некоторых проб и ошибок я заметил, что использовал неправильный формат для функции момента: 

($ as any).fn.dataTable.moment("dd.MM.yyyy");

должно быть 

($ as any).fn.dataTable.moment("DD.MM.YYYY");

И когда я изменяю оба вызова jQuery наJQuery.вместо $ начинает работать сортировка - ура - НО - перестает работать стилирование данных (и только данных!): 

"styles": [
  "src/assets/style/brand-bootstrap.css",
  "node_modules/font-awesome/css/font-awesome.min.css",
  "node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css",

Опять же, при использовании $(..).DataTable(...) стилизация работает, а сортировка - нет.При использовании jQuery(..).DataTable(..) стилизация не используется, но сортировка работает: -)

Так что, похоже, ошибка связана с загрузкой библиотек, я предполагаю, что jQuery ссылается на некоторый глобальный экземпляр jQuery - так что жесмысл использовать import * as $ from "jquery", а не просто использовать глобальный?

...