web-dev-qa-db-ja.com

'table'の既知のプロパティではないため、 'dtOptions'にバインドできません。

私はangular方法で動作し、このコードを使用するように取り組んでいます 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'.

誰かが私がこの問題を修正するのを手伝ってくれますか？

angularjsdatatableangular-datatables
6
Ali-Alrabi

TablesComponentがある場合は、tables.module.tsファイルで次の行を使用する必要があります。

import { DataTablesModule } from 'angular-datatables';

そして、DataTablesModuleを@NgModuleインポートに追加します。

これらの行をappComponentに追加するとエラーが発生しましたが、特別なモジュールにインポートすると、問題は解決しました。

13
Ganj Khani

手順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.DataTableモジュールをAngularアプリケーションモジュール（必要な場所）にインポートします。

import { DataTablesModule } from 'angular-datatables';

以下は、DataTableを使用しているhtmlテーブルの例です-

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

angularアプリ（共有モジュールがある場合））の構造によっては、forRootを使用してインポートする必要がある場合があります。これにより、シングルトンサービスとして扱われます。DataTablesModule.forRoot()。これは私にとってトリックでした。

0
Rich

import { DataTablesModule } from 'angular-datatables';

そうです（ Ganj Khani ）DataTablesModuleをapp.module.tsファイルにインポートして入れます

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

期待どおりに機能し、それぞれの.tsファイルでdtOptionsがすべて正しく構成されていることを確認します。

0
Manoj Maduri