TypeError: $(...).DataTable 不是 Angular4 中的函数答案

【问题标题】：TypeError: $(...).DataTable is not a function in Angular4TypeError: $(...).DataTable 不是 Angular4 中的函数
【发布时间】：2018-07-20 12:05:30
【问题描述】：

我在我的 angular4 应用程序中使用 bootstrap4 datatable jquery 函数来创建一个可排序的表。这是代码。

.component.ts

import { Component } from '@angular/core'; declare var $: any;

@Component({
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css']

}) export class DashboardComponent {
    constructor() {
        $('#sortableTable').DataTable();
    }
}

index.html

<head>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 
  <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>

</head>

.angular-cli.json

"styles": [
            "styles.css",
            "../node_modules/bootstrap/dist/css/bootstrap.min.css",
            "../node_modules/alertifyjs/build/css/alertify.min.css",
            "../node_modules/alertifyjs/build/css/themes/bootstrap.min.css",
            "../src/assets/css/style.css",
            "../src/assets/css/colors/default-dark.css"
        ],
        "scripts": [
            "../node_modules/jquery/dist/jquery.min.js",
            "../node_modules/popper.js/dist/umd/popper.min.js",
            "../node_modules/bootstrap/dist/js/bootstrap.min.js",
            "../node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.min.js",
            "../node_modules/metismenu/dist/metisMenu.min.js",
            "../node_modules/pace-js/pace.min.js",
            "../node_modules/alertifyjs/build/alertify.min.js"
        ],

我在运行我的应用程序时收到此错误。

ERROR TypeError: $(...).DataTable 不是函数在新的 DashboardComponent (dashboard.component.ts:17) 在 createClass (core.es5.js:10910) 在 createDirectiveInstance (core.es5.js:10751) 在 createViewNodes (core.es5.js:12192) 在 createRootView (core.es5.js:12082) 在 callWithDebugContext (core.es5.js:13467) 在 Object.debugCreateRootView [as createRootView] (core.es5.js:12771) 在 ComponentFactory_.create (core.es5.js:9861) 在 ComponentFactoryBoundToModule.create (core.es5.js:3333) 在 ViewContainerRef_.createComponent (core.es5.js:10059)

我希望听到任何人的意见，并提供一个很好的解决方案。谢谢。

【问题讨论】：

看起来你正在加载 jQuery 两次；一次在 index.html 中，一次在 .angular-cli.json 中。删除其中一个，可能是 index.html 中的那个。
感谢您的回复。让我试试。
当我从 index.html 中删除 jquery 库时，我收到此错误。 Uncaught ReferenceError: jQuery is not defined 当我从 angular-cli.json 中删除 jquery 库时仍然出现错误
如果你从 angular-cli.json 中删除，你会得到哪个错误？并确保在之后重新启动 ng serve
我收到此错误。错误 TypeError: $(...).DataTable is not a function at new DashboardComponent (dashboard.component.ts:17) at createClass (core.es5.js:10910) at createDirectiveInstance (core.es5.js:10751) at createViewNodes (core.es5.js:12192) at createRootView (core.es5.js:12082) at callWithDebugContext (core.es5.js:13467) at Object.debugCreateRootView [as createRootView] (core.es5.js:12771) at ComponentFactory_.create (core.es5.js:9861) at ComponentFactoryBoundToModule.create (core.es5.js:3333) at ViewContainerRef_.createComponent (core.es5.js:10059)

标签： jquery angular datatable bootstrap-4

【解决方案1】：

使用 @ViewChild 调用该函数。例如

@ViewChild('sortableTable') sortableTable: any;
sortableTable.DataTable()

【讨论】：