Angular DataTables : $(. ..).DataTable 不是函数

标签 angular angularjs-directive datatables angular-datatables

Angular 版本:6.0.4 ~ 节点版本:10.4.1 ~ NPM 版本:6.1.0
我看到这个问题被问了很多次,但没有回答。
关注这些后instructions to install angular-datables ,并尝试在表上使用该指令,如他们的 Zero Configuration example ,我不断收到此错误:

TypeError: $(...).DataTable is not a function
at 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>

最佳答案

通过刷新我的节点模块修复了错误

rm -rf node_modules/
npm cache clear
npm install

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

关于Angular DataTables : $(. ..).DataTable 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51228619/

相关文章:

javascript - 如何在同级组件指令之间传递事件

angularjs - 为什么 ng-click ="test()"不起作用,但 onclick ="angular.element(this).scope().test()"起作用?

angularjs - 跳过对某些特定元素的脏检查到 ng-form

jquery - 响应中的html div弹出宽度

angular - 在 Angular 2 中更改当前路由上的单个路由参数

angular - primeng:安装 Angular 16.2.0 版本

angular - ERR_INVALID_HTTP_RESPONSE 在 Google Chrome 浏览器中使用 Angular 7 和 ASP.Net Core 2.2

javascript - 如何使用 ngModel Angular 在输入文本中使用管道

javascript - jQuery 数据表插件 : Sort German date

php - 从单独的 .php 表初始化 dataTable