在 Angular 中实现 jquery 数据表时出现错误

Question

我想以角度实现jquery datatbles，所以这就是我添加这些包的原因：npm install angular-datatables，npm install jquery，npm install datatables.net，npm install datatables.net-dt 但出现这样的错误

错误： node_modules/角度数据表/src/角度数据表.directive.d.ts:31:25

• 错误 TS2503：找不到命名空间“DataTables”。

31 dtInstance：承诺； ~~~~~~~~~~

错误：node_modules/angular-datatables/src/models/settings.d.ts:3:38 - 错误 TS2503：找不到命名空间“DataTables”。

3 导出接口ADTSettings扩展DataTables.Settings { ~~~~~~~~~~

错误：node_modules/angular-datatables/src/models/settings.d.ts:6:37 - 错误 TS2503：找不到命名空间“DataTables”。

6 导出接口ADTColumns扩展DataTables.ColumnSettings { ~~~~~~~~~~

× 编译失败。

这是我的component.html代码：

<section class="content">
    <div class="content-block">
      <div class="block-header" *ngFor="let breadscrum of breadscrums">
        <!-- breadcrumb -->
        <app-breadcrumb [title]="breadscrum.title" [items]="breadscrum.items" [active_item]="breadscrum.active">
        </app-breadcrumb>
      </div>
      <div class="row clearfix">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <div class="card">
            <div class="header">
              <h2>Angular Data Tables</h2>
            </div>
            <div class="body">
                
              <!-- Add content here -->
              <table>
                <thead>
                    <th>Code</th>
                    <th>Product</th>
                    <th>Amount</th>
                    <th>Type</th>
                    <th>IsActive</th>
                </thead>
                <tbody>
                    @for(item of productlist;track item){
                        <tr>
                            <td>{{item.code}}</td>
                            <td>{{item.product}}</td>
                            <td>{{item.amount}}</td>
                            <td>{{item.type}}</td>
                            <td>{{item.isActive}}</td>
                        </tr>
                    }
                </tbody>
              </table>

            </div>
          </div>
        </div>
      </div>
    </div>
  </section>



  

这是我的打字稿代码：

import { Component, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { products} from '../../core/models/products'
import { MasterService } from '../../core/service/master.service';
import { DataTablesModule } from 'angular-datatables';
import { Config } from 'datatables.net';

@Component({
  selector: 'app-angular-datatables',
  templateUrl: './angular-datatables.component.html',
  styleUrls: ['./angular-datatables.component.sass'],
  //imports: [DataTablesModule]
})
export class AngularDatatablesComponent implements OnInit {
  breadscrums = [
    {
      title: 'Tables',
      items: ['Extra'],
      active: 'Datatables',
    },
  ];

  productlist! : products[]
  //dtoptions: Config={}
  dtoptions: Config = {};
  dttrigger:Subject<any>=new Subject<any>();

  constructor(private service: MasterService) {}
  ngOnInit() {
    this.loadproducts();
  }

  loadproducts(){
    this.service.Loadproducts().subscribe(item=>{
      this.productlist=item;
      this.dttrigger.next(null);
    })
  }

}

这是我的 anglat.json：

"assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/@swimlane/ngx-datatable/index.css",
              "./node_modules/@swimlane/ngx-datatable/themes/material.css",
              "./node_modules/@swimlane/ngx-datatable/assets/icons.css",
              "src/assets/scss/style.scss",
              "src/assets/scss/theme/all-themes.scss",
              "src/styles.scss",
              "./node_modules/datatables.net-dt/css/dataTables.dataTables.min.css",
              "./node_modules/datatables.net-dt/css/dataTables.dataTables.css"
            ],
            "scripts": [
              "./node_modules/moment/min/moment.min.js",
              "./node_modules/chart.js/dist/Chart.bundle.js",
              "./node_modules/apexcharts/dist/apexcharts.min.js",
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/datatables.net/js/dataTables.min.js"
            ],

即使我重新安装了所有软件包但无法解决问题

Answer 1

尝试安装数据表所需的类型。

找不到命名空间“DataTables”#1248

npm i @types/datatables.net --save-dev