Question

角度版本：6.0.4〜节点版本：10.4.1〜NPM版本：6.1.0

我已经看过这个问题很多次了，但是没有回答。

在遵循了这些instructions to install angular-datables并尝试在表上使用伪指令后，就像他们的Zero Configuration example一样，我不断遇到此错误：

TypeError：$（...）。DataTable不是函数
在angular-datatables.directive.js：42

包含的样式和脚本

"styles": [
   "node_modules/bootstrap/dist/css/bootstrap.min.css",
   "node_modules/datatables.net-dt/css/jquery.dataTables.css",
   "src/styles.css"
],
"scripts": [
   "node_modules/jquery/dist/jquery.min.js",
   "node_modules/bootstrap/dist/js/bootstrap.min.js",
   "node_modules/datatables.net/js/jquery.dataTables.js"
]

导入app.module.ts

import { DataTablesModule } from 'angular-datatables';

DataTablesModule已添加到导入数组。

*。component.html

<h1>View Accounts</h1>
<table class='table table-dark text-center table-striped table-hover rounded' datatable>
  <thead class='thead-dark'>
    <tr>
      <td>#</td>
      <td>Account Name</td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor='let account of db.accounts; let i = index' routerLink='/account/{{account.id}}'>
      <td>{{i+1}}</td>
      <td>{{account.accountHolder}}</td>
    </tr>
  </tbody>
</table>

Answer 1

该错误已通过刷新节点模块得到解决

rm -rf node_modules/
npm cache clear
npm install

我可能安装了两个版本的jQuery，在数据表绑定到它之后重置了我的jQuery实例。

Answer 2

    Angular version(9 and above):
    
    component.ts
    ------------
    import * as $ from 'jquery';
    import 'datatables.net';
    import { from, Subject } from 'rxjs';
    
    export class testComponent implements OnInit {
      dtOptions: DataTables.Settings = {};
      dtTrigger: Subject<any> = new Subject();
      
    }

component.html
--------------
 
 <table  [dtTrigger]="dtTrigger" id="example" datatable  class="row-border hover">
     <thead><tr><th></th></tr></thead>
    <tbody>....</tbody>
<table>

Angular DataTables：$（...）。DataTable不是函数

2 个答案: