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

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-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>

Answer 3

import { DataTablesModule } from 'angular-datatables';

没错（Ganj Khani）将

DataTablesModule 

导入到

app.module.ts

文件中并放入

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

它将按预期工作，并确保您已在各自的

dtOptions

文件中正确配置了

.ts

。

Answer 4

对我来说这是非常简单的修复。我忘记将

datatable

属性添加到表格元素。您必须添加该内容才能让

DataTableModule

拾取它。

示例：

<table datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions"></table>

Answer 5

使用此命令升级您的项目：
>ng update @angular/cli   @angular/core   --allow-dirty   --force

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CustomerComponent } from './customer/customer.component';
import { DataTablesModule } from "angular-datatables";
import { CommonModule } from '@angular/common';

const routes: Routes = [

  { path: 'customer', component: CustomerComponent}
];

@NgModule({

  declarations: [

    CustomerComponent    ////without class declarations dataTable will not work....
  ],

  imports: [RouterModule.forRoot(routes), DataTablesModule, CommonModule],   //imports DataTablesModule here

  exports: [RouterModule]
})

export class AppRoutingModule { }

Answer 6

检查您正在导入的正确模块：

从“角度数据表”导入{DataTablesModule}；

Answer 7

第 1 步确保已安装 Angular-dataTable。

$ ng 添加角度数据表

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

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

更新以下行

static ɵdir: i0.ɵɵDirectiveDeclaration<DataTableDirective, "[datatable],never,{dtOptions: {alias: "dtOptions"; required: false;}; dtTrigger: { alias: "dtTrigger"; required: false; }; }, {}, never, never, false, never>;

像这样更新。

static ɵdir: i0.ɵɵDirectiveDeclaration<DataTableDirective, "[datatable]",
        never,
        { dtOptions: 'dtOptions', dtTrigger: 'dtTrigger' },
        never,
        never,
        never,
        false,
        never>;

您的 HTML 模板

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

Answer 8

根据您构建角度应用程序的方式（如果您有共享模块），您可能需要使用 forRoot 导入它，以便将其视为单例服务：

DataTablesModule.forRoot()

。这对我来说很有效。