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

lqfhib0f  于 2023-02-15  发布在  Angular
关注(0)|答案(6)|浏览(158)

我的工作得到角的方式工作,并使用此代码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'.

有人能帮我解决这个问题吗?

qnyhuwrf

qnyhuwrf1#

如果您有TablesComponent,则应在tables.module.ts文件中使用以下行:

import { DataTablesModule } from 'angular-datatables';

并将DataTablesModule添加到@NgModule导入。
我在appComponent中添加这些行时出错,但当我导入到我的特殊模块中时,问题解决了。

2o7dmzc5

2o7dmzc52#

步骤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 应用程序模块(如果你需要.)

import { DataTablesModule } from 'angular-datatables';

下面是使用DataTable的html表格示例-

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

lyr7nygr3#

import { DataTablesModule } from 'angular-datatables';
正确(Ganj Khani)将DataTablesModule导入app.module.ts文件并将其放入
@NgModule({ imports: [ CommonModule, DataTablesModule, MyRoutingModule ]
它将按预期工作,并确保您在各自的.ts文件中为dtOptions进行了正确的配置。

dsf9zpds

dsf9zpds4#

对我来说,这是一个非常简单的修复。我忘记了将datatable属性添加到table元素中。必须添加该属性,DataTableModule才能将其拾取。

    • 示例:**
<table datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions"></table>
sz81bmfz

sz81bmfz5#

使用此命令升级您的项目:

〉Angular /cli的ng更新 @角/芯 - -允许脏 - -力

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 { }
xurqigkl

xurqigkl6#

根据您构建Angular 应用的方式(如果您有共享模块),您可能需要使用forRoot导入它,以便将其视为单例服务:DataTablesModule.forRoot() .这对我起到了作用。

相关问题