Angular5 + Jquery Datatable + Liferay 7.1 не может создать экземпляр данных - PullRequest
Новая
       9

Angular5 + Jquery Datatable + Liferay 7.1 не может создать экземпляр данных

0 голосов
/ 31 декабря 2018

Я создаю портлет на Liferay 7.1, созданный с использованием шаблона blade-cli и npm-angular.Согласно моему требованию, следующая комбинация кажется идеальной:

Angular + JQuery Datatable (на платформе Liferay 7.1).

Я следовал коду согласно следующему репо: https://github.com/liorchamla/angular-datatables-from-scratch

Я могу успешно построить и развернуть проект, но затем, когда я пытаюсь зарегистрировать datatable () в объекте таблицы jquery, я получаю следующую ошибку в chrome devtools, но я вижу данные в таблице HTML(обычная таблица HTML без функций с данными): 

core.umd.js:1487 ERROR TypeError: table.DataTable is not a function
at SafeSubscriber._next (app.component.ts:32)
at SafeSubscriber.__tryOrUnsub (Subscriber.ts:258)
at SafeSubscriber.next (Subscriber.ts:208)
at Subscriber._next (Subscriber.ts:139)
at Subscriber.next (Subscriber.ts:99)
at MapSubscriber._next (map.ts:83)
at MapSubscriber.Subscriber.next (Subscriber.ts:99)
at FilterSubscriber._next (filter.ts:96)
at FilterSubscriber.Subscriber.next (Subscriber.ts:99)
at MergeMapSubscriber.notifyNext (mergeMap.ts:154)

Я проверил следующие пункты:

  1. Тот же код отлично работает на созданном автономном угловом коде (без Liferay)использование angular-cli.
  2. При отладке кода на сервере Liferay я вижу, что у меня есть объект jquery при вызове $ ("table") в приведенном ниже фрагменте, но код завершается ошибкой с указанной выше ошибкой при вызовеdatatable () для того же объекта.

==== 

ngOnInit(){
this.http.get('https://5a5a9e00bc6e340012a03796.mockapi.io/clients')
  .subscribe((data: any[]) => {
    this.clients = data;
    this.chRef.detectChanges();

    const table: any = $('table'); // we have the jquery obj here
    this.dataTable = table.DataTable(); // error here
  });

} ​​

====

На вкладке сети chrome, я вижу, что версия jquery (3.3.1) правильно загружена с датируемым 1.10.19 (как и ожидалось). Примечание: Liferay 7.1 также загружает jquery 3.3.1 изнутри, и согласно вкладке сети он загружается до загрузки моей версии jquery.

Части package.json для справки:

    "dependencies": {
       "@angular/core": "^5.0.0",
       "@types/datatables.net": "^1.10.14",
       "@types/datatables.net-buttons": "^1.4.0",
       "@types/datatables.net-colreorder": "^1.4.0",
       "@types/datatables.net-select": "^1.2.4",
       ..
       "datatables.net": "^1.10.19",
       "datatables.net-bs4": "^1.10.19",
       "datatables.net-buttons": "^1.5.4",
       "datatables.net-buttons-bs4": "^1.5.4",
       "datatables.net-colreorder": "^1.5.1",
       "datatables.net-colreorder-bs4": "^1.5.1",
       "datatables.net-responsive": "^2.2.3",
       "datatables.net-responsive-bs4": "^2.2.3",
       "datatables.net-select": "^1.2.7",
       "datatables.net-select-bs4": "^1.2.7",
       "datatables.responsive.typings": "^1.0.3",
       "jquery": "^3.3.1",
     }
    "devDependencies": {
       ..
       "@types/jquery": "^3.3.29",
       "typescript": "2.4.2",
       "liferay-npm-bundler": "^2.0.0",
       ..
     }

Я застрял здесь, поскольку я пробовал много разных подходов, но ни один из них не работал.

Кто-нибудь успешно реализовал комбинацию (angular + jquery datatable + liferay 7.1)?

Будем весьма благодарны за любые предложения или указатели.

Примечание. Поскольку это решение на основе Liferay, у меня нет возможности поделиться примером, чтобы увидеть мою проблему.Но я мог бы проверить любое предложение, если потребуется.Автономная версия точно такая же, как в вышеупомянутом репо, и работает так же, как показано здесь:

https://liorchamla.github.io/angular-datatables-from-scratch/

1 Ответ

0 голосов
/ 03 января 2019

Во-первых, попробуйте удалить свою версию jQuery, чтобы загружался только один jQuery (Liferay 7.1).

Во-вторых, в вашем javascript передайте ему экземпляр jQuery при загрузке библиотеки данных.:

require( 'datatables.net-bs4' )( window, jQuery );

...