Question

我正在使用Blade-cli和npm-angular模板在Liferay 7.1上创建一个portlet。按照我的要求，以下组合似乎很完美：

Angular + JQuery数据表（在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)

我验证了以下几点：

相同的代码在使用angular-cli创建的独立角度代码（不带Liferay）上可以很好地工作。
在Liferay服务器上调试代码时，在以下代码段中调用$（“ table”）时，我看到了jquery对象，但是在同一对象上调用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",
       ..
     }

我被困在这里，因为我尝试了许多不同的方法，但是没有一个奏效。

有人成功实现了组合（角度+ jQuery数据表+ Liferay 7.1）吗？

任何建议或指示，将不胜感激。

注意：由于这是基于Liferay的解决方案，因此我没有选择共享示例以查看问题的选项。但是如果需要，我将能够测试任何建议。独立版本与上述仓库中的版本完全相同，其工作原理如下所示：

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

Answer 1

首先，尝试删除您的jQuery版本，以便仅加载一个jQuery（Liferay 7.1之一）。

第二，在您的JavaScript中，加载数据表库时将jQuery实例传递给它：

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

Angular5 + Jquery数据表+ Liferay 7.1无法实例化数据表

1 个答案: