Question

我正努力让角度方式工作并使用此代码https://l-lin.github.io/angular-datatables/#/basic/angular-way

- node version:v6.10.3
- npm version:v6.10.3
- angular version:4.3.2
- jquery version:3.2.1
- datatables version:1.10.15
- angular-datatables version:4.2.0
- angular-cli version:1.2.6

我已经采取了这个步骤来修复意外的值＆＃34; DataTablesModule＆＃34;模块导入＆＃34; AppModule＆＃34;。请添加@NgModule注释。

 1-in tsconfig.json add
"baseUrl": ".",
"paths": {
   "@angular/*": [
    "node_modules/@angular/*"
 ]
 2-in webpack.comon.js add 
  plugins: [
         new TsConfigPathsPlugin({
          configFileName: helpers.root('tsconfig.json'),
          compiler: "typescript",
        })
   ]

但是会收到此错误

Can't bind to 'dtOptions' since it isn't a known property of 'table'.

任何人都可以帮我解决这个问题吗？

Answer 1

如果您有TablesComponent，则应在tables.module.ts文件中使用此行：

import { DataTablesModule } from 'angular-datatables';

并将DataTablesModule添加到@NgModule次导入。

我在appComponent添加这些行时遇到错误，但是当我在我的特殊模块中导入时，问题就解决了。

Answer 2

步骤1.更新＆＃34; .angular-cli.json＆＃34;文件样式和脚本属性如下。

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

步骤2.在Angular应用程序模块中导入DataTable模块（您需要的位置。）

import { DataTablesModule } from 'angular-datatables';

以下是使用DataTable -

的html表示例

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

Answer 3

取决于您的角度应用程序的结构（如果您具有共享模块），可能需要使用forRoot导入它，因此将其视为单例服务：DataTablesModule.forRoot()。这对我有用。

Answer 4

import { DataTablesModule } from 'angular-datatables';

没错（Ganj Khani）将DataTablesModule导入到app.module.ts文件中并放入

@NgModule({ imports: [ CommonModule, DataTablesModule, MyRoutingModule ]

它将按预期运行，并确保已在各自的dtOptions文件中为.ts正确配置了所有文件。

无法绑定到＆＃39; dtOptions＆＃39;因为它不是“表格”的已知属性。

4 个答案: