Question

我在代码中使用angular-datatables时遇到TypeError。

ERROR TypeError: $(...).DataTable is not a function
at angular-datatables.directive.js:38

指令中的代码是：

 DataTableDirective.prototype.displayTable = function () {
    var _this = this;
    this.dtInstance = new Promise(function (resolve, reject) {
        Promise.resolve(_this.dtOptions).then(function (dtOptions) {
            // Using setTimeout as a "hack" to be "part" of NgZone
            setTimeout(function () {
                //Error in this line
                var dt = $(_this.el.nativeElement).DataTable(dtOptions);
                resolve(dt);
            });
        });
    });
};

这是什么问题？我通过以下方式安装了库和依赖项：

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

有什么想法吗？

更新：这是我的tsconfig.app.json：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "allowSyntheticDefaultImports": true
 },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]

}

和tsconfig.json：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "allowSyntheticDefaultImports": true,    
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ]
    }
  }
}

Answer 1

嗨，你确定_this正确设置了你的组件吗？ ..你尝试过这样的事情：

DataTableDirective.prototype.displayTable = () => {
    var _this = this;
    this.dtInstance = new Promise(function (resolve, reject) {
        Promise.resolve(_this.dtOptions).then(function (dtOptions) {
            // Using setTimeout as a "hack" to be "part" of NgZone
            setTimeout(function () {
                //Error in this line
                var dt = $(_this.el.nativeElement).DataTable(dtOptions);
                resolve(dt);
            });
        });
    });
};

希望它可以帮到你！

Answer 2

将它们都放在angular.json中为我解决了这个问题

"scripts": [
    "node_modules/jquery/dist/jquery.min.js", 
    "node_modules/datatables.net/js/jquery.dataTables.js"
]

Answer 3

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

然后

添加angular.json

enter code here
 {
 "projects": {
    "your-app-name": {
    "architect": {
    "build": {
      "options": {
        "styles": [
          "node_modules/datatables.net-dt/css/jquery.dataTables.css"========>*
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.js",==============================>*
          "node_modules/datatables.net/js/jquery.dataTables.js"==============>*
        ],

使用cmd重新启动

在为Angular 4使用angular-datatables时，DataTable不是函数TypeError

3 个答案: