无法绑定到“ dtOptions”，因为它不是“表”的已知属性。

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

我已执行此步骤来修复模块“ AppModule”导入的意外值“ DataTablesModule”。请添加一个@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 步确保已安装 Angular-dataTable。

\n

$ ng 添加角度数据表

\n

步骤 2 更新此文件 angular-datatables.directive.d.ts

\n

打开这个角度文件node_modules/angular-datatables/src/angular-datatables.directive.d.ts

\n

更新以下行

\n

static \xc9\xb5dir: i0.\xc9\xb5\xc9\xb5DirectiveDeclaration<DataTableDirective, "[datatable],never,{dtOptions: {alias: "dtOptions"; required: false;}; dtTrigger: { alias: "dtTrigger"; required: false; }; }, {}, never, never, false, never>;\n

\n

像这样更新一下。

\n

static \xc9\xb5dir: i0.\xc9\xb5\xc9\xb5DirectiveDeclaration<DataTableDirective, "[datatable]",\n        never,\n        { dtOptions: 'dtOptions', dtTrigger: 'dtTrigger' },\n        never,\n        never,\n        never,\n        false,\n        never>;\n

\n

您的 HTML 模板

\n

<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>\n

\n

Answer 3

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

{
 ........
  "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>