Question

我在angular4 app中使用了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"
        ],

运行我的应用程序时出现此错误。

错误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） at callWithDebugContext（core.es5.js：13467） at 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）

我希望听到任何人提出一个很好的解决方案。感谢。

Answer 1

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

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

TypeError：$（...）。DataTable不是Angular4中的函数

1 个答案: