無法綁定到 '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添加這些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 ]

它將按預期工作，並確保您已為各自的.ts文件中的dtOptions正確配置。

Answer 4

根據您構建 Angular 應用程序的方式（如果您有共享模塊），您可能需要使用 forRoot 導入它，以便將其視為單例服務： DataTablesModule.forRoot() 。 這對我有用。

Answer 5

對我來說，這是非常簡單的修復。 我忘了將datatable屬性添加到 table 元素。 您必須為DataTableModule添加它以獲取它。

例子：

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