Angular-Datatables：无法绑定到“dtOptions”，因为它不是“表”的已知属性

Question

对于使用 Angular 开发 Web 应用程序，我想使用数据表。 所以我安装了所需的不同模块：

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

我的代码将购买列表带到服务中并尝试显示它：

purchases-list.component.ts

import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { DataTableDirective } from 'angular-datatables';
import { Purchase } from '../../models/Purchase.model';
import { PurchasesService } from '../../services/Purchases.service';

@Component({
  selector: 'app-purchases-list',
  templateUrl: './purchases-list.component.html',
  styleUrls: ['./purchases-list.component.css']
})
export class PurchasesListComponent implements OnInit, AfterViewInit, OnDestroy {

  private purchases: Purchase[] = [];
  purchasesSubscription: Subscription;

  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject();

  constructor(private purchasesService: PurchasesService) { }

  ngOnInit() {
    this.purchasesSubscription = this.purchasesService.purchasesSubject.subscribe(
      (purchases: Purchase[]) => {
        this.purchases = purchases;
      }
    );
    this.purchasesService.getAll();
  }

  ngAfterViewInit() {
    this.dtTrigger.next();
  }

  ngOnDestroy() {
    this.purchasesSubscription.unsubscribe();
    this.dtTrigger.unsubscribe();
  }

}

purchases-list.component.html

<table dataTable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-bordered">
  <thead>
    <tr>
      <td>Demandeur</td>
      <td>Projet</td>
      <td>Nombre d'articles</td>
    </tr>
  </thead>

  <tbody>
    <tr *ngFor="let purchase of purchases">
      <td>{{ purchase.loginUser }}</td>
      <td>{{ purchase.project }}</td>
      <td>{{ purchase.articles.length }}</td>
    </tr>
  </tbody>
</table>

编译时，一切正常，但是当我启动我的应用程序时，页面保持空白并出现错误： SCRIPT5022：模板解析错误：无法绑定到“dtOptions”，因为它不是“表”的已知属性。

我不知道它是从哪里来的……我已经在几个论坛上搜索过，但没有一个适合我的解决方案！ 所以我在这里试试。

为了帮助你，这里是我的 app.module.ts 的代码

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { DataTablesModule } from 'angular-datatables';
import { PurchasesService } from '../services/Purchases.service';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app/app.component';
import { PurchasesListComponent } from './purchases-list/purchases-list.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    NewPurchaseComponent,
    PurchasesListComponent,
    HomeComponent,
    ErrorComponent,
  ],
  imports: [
    BrowserModule,
    DataTablesModule.forRoot(),
    AppRoutingModule
  ],
  providers: [PurchasesService],
  bootstrap: [AppComponent]
})

export class AppModule {

  constructor() { }
}

还有我的packages.json

{
  "name": "order",
  "version": "0.0.0",
  "scripts": {},
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.15",
    "@angular/cdk": "^8.0.1",
    "@angular/common": "^7.2.15",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "^7.2.15",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "angular-datatables": "^8.0.0",
    "core-js": "^2.5.4",
    "datatables.net": "^1.10.19",
    "datatables.net-dt": "^1.10.19",
    "jquery": "^3.4.1",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.5.2",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.9",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/datatables.net": "^1.10.17",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.29",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}

Answer 1

将脚本添加到 Angular.json：

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/datatables.net-dt/css/jquery.dataTables.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/datatables.net/js/jquery.dataTables.js"
            ],
            ...
}

并将其导入您的模块：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    DataTablesModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})