Angular4 CLI 项目中的 Bootstrap 4 Datatablejs

Question

我刚刚使用 Angular CLI 实用程序在 Angular 4 中创建了一个 Web 应用程序。

我想在我的网络应用程序的一页中使用 DatatableJs 显示一张表格。我明白了，但风格太糟糕了。

我认为这是由于依赖项安装问题。我通过 npm安装了 Bootstrap 4 和DataTables 核心。

这是我在.angular-cli.json文件中的配置：

谢谢。

Answer 1

要将 Bootstrap 4 与 DataTablejs 一起使用，请使用 npm 来安装 Bootstrap 4 包。

npm install --save datatables.net-bs4

然后，更新“.angular-cli.json”文件样式和脚本属性，如下所示。

{
 ........
  "apps": [
    { 
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        //for bootstrap4
        "../node_modules/datatables.net-bs4/css/dataTables.bootstrap4.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",
        //for bootstrap4
        "../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js"
      ]
      ...
    }
  ],
 .....
}

进行上述更改后，我们可以使用 bootstrap4 类来显示表，例如 bootstrap4 表

<table id='table' datatable [dtOptions]="dtOptions" class="table table-striped table-bordered" cellspacing="0" width="100%">
      </table>