Невозможно выполнить привязку к «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

Я сделал эти шаги, чтобы исправить неожиданное значение «DataTablesModule», импортированное модулем «AppModule». Пожалуйста, добавьте аннотацию @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'.

Может ли кто-нибудь помочь мне исправить эту проблему?


datatable angularjs angular-datatables
person Ali-Alrabi    schedule 11.09.2017    source источник
comment
Вы нашли какое-либо рабочее решение для вышеуказанной проблемы?   -  person Anurag Goel    schedule 12.02.2018

Ответы (4)


arrow_upward
18
arrow_downward

Если у вас есть TablesComponent, вы должны использовать эту строку в файле tables.module.ts:

import { DataTablesModule } from 'angular-datatables';

И добавьте DataTablesModule к @NgModule импорту.

У меня была ошибка, когда я добавлял эти строки в appComponent, но когда я импортировал в свой специальный модуль, проблема была решена.

person Ganj Khani    schedule 20.12.2017

arrow_upward
3
arrow_downward

Шаг 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';

Ниже приведен пример таблицы html, в которой используется DataTable.

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

arrow_upward
2
arrow_downward

import { DataTablesModule } from 'angular-datatables';

правильно (Ganj Khani) импортируйте файл DataTablesModule в файл app.module.ts и поместите его в

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

Он будет работать, как и ожидалось, и убедитесь, что вы правильно настроили dtOptions в соответствующем файле .ts.

person Manoj    schedule 09.08.2018

arrow_upward
0
arrow_downward

В зависимости от того, как вы структурировали свое угловое приложение (если у вас есть общие модули), вам может потребоваться импортировать его с помощью forRoot, чтобы оно рассматривалось как одноэлементная служба: DataTablesModule.forRoot(). Это помогло мне.

person Rich    schedule 17.07.2018