[英]Can't bind to 'dtOptions' since it isn't a known property of 'table'.
I'm working to get angular way work and use this code https://l-lin.github.io/angular-datatables/#/basic/angular-way我正在努力让角度工作并使用此代码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
I have made this steps to fix Unexpected value "DataTablesModule" imported by the module "AppModule".我已采取此步骤来修复模块“AppModule”导入的意外值“DataTablesModule”。 Please add a @NgModule Annotation.请添加@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",
})
]
but get this error但得到这个错误
Can't bind to 'dtOptions' since it isn't a known property of 'table'.
Can anyone help me please to fix this isuue?谁能帮我解决这个问题?
If you have TablesComponent
, you should use this line in your tables.module.ts
file:如果你有TablesComponent
,你应该在你的tables.module.ts
文件中使用这一行:
import { DataTablesModule } from 'angular-datatables';
And add DataTablesModule
to @NgModule
imports.并将DataTablesModule
添加到@NgModule
导入。
I had error when I add these lines in appComponent
, but when I import in my special module, the problem was solved.我在appComponent
添加这些appComponent
,但是当我在我的特殊模块中导入时,问题解决了。
Step 1. Update ".angular-cli.json" file Styles and scripts properties as below.步骤 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"
]
...
}
],
.....
}
Step 2. import DataTable Module in our Angular Application Module(Where you need.)步骤 2. 在我们的 Angular 应用程序模块中导入 DataTable 模块(您需要的地方。)
import { DataTablesModule } from 'angular-datatables';
Below is the example of html table which is using DataTable -以下是使用 DataTable 的 html 表格示例 -
<table id='table' datatable [dtOptions]="dtOptions" class="table table-striped table-bordered" cellspacing="0" width="100%">
</table>
import { DataTablesModule } from 'angular-datatables';
that's right ( Ganj Khani ) import the DataTablesModule
into app.module.ts
file and put it in没错( Ganj Khani )将DataTablesModule
导入app.module.ts
文件并放入
@NgModule({ imports: [ CommonModule, DataTablesModule, MyRoutingModule ]
It will work as expected and make sure you have all configured properly for the dtOptions
in your respective .ts
file.它将按预期工作,并确保您已为各自的.ts
文件中的dtOptions
正确配置。
Depending on how you've structured your angular app (if you're have shared modules), you may need to import it using forRoot so it's a treated as a singleton service: DataTablesModule.forRoot()
.根据您构建 Angular 应用程序的方式(如果您有共享模块),您可能需要使用 forRoot 导入它,以便将其视为单例服务: DataTablesModule.forRoot()
。 This did the trick for me.这对我有用。
For me it was quite simple fix.对我来说,这是非常简单的修复。 I forgot to add the datatable
attribute to the table element.我忘了将datatable
属性添加到 table 元素。 You must add that for the DataTableModule
to pick it up.您必须为DataTableModule
添加它以获取它。
Example:例子:
<table datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions"></table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.