使用 Angular 4 的角度数据表时，DataTable 不是函数 TypeError答案

【问题标题】：DataTable is not a function TypeError while using angular-datatables for Angular 4使用 Angular 4 的角度数据表时，DataTable 不是函数 TypeError
【发布时间】：2017-10-20 10:38:19
【问题描述】：

在我的代码中使用 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/*"
      ]
    }
  }
}

【问题讨论】：

检查您的 tsconfig.json 及其子文件（例如 tsconfig.app.json），如果您有空类型数组（“types”：[]），请将其删除。
我有一个，我删除了它，但没有任何变化。
angular-cli.json文件中的所有文件都添加了吗？
我添加了 "..\/node_modules\/jquery\/dist\/jquery.min.js", "../node_modules/datatables.net/js/jquery.dataTables.js" " ../node_modules/datatables.net-dt/css/jquery.dataTables.css"

标签： angular angular-datatables

【解决方案1】：

您好，您确定 _this 与您的组件的 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);
            });
        });
    });
};

希望对你有帮助！

【讨论】：

Jquery 和 jquery 扩展是全局的。为什么你认为这是关于闭包问题？
因为每次我在我的 ts 代码中添加函数时，我都会失去我的 this 作用域 .. 所以不妨试试胖箭头函数 .. 希望它对你有帮助！
啊..确保在 angular-cli.json 文件中包含您的 datatable.js 插件..并小心使用原型
所以任何人都有解决方案。我也面临同样的问题

【解决方案2】：

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重启

【讨论】：

【解决方案3】：

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

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

【讨论】：