Angular 安装角度数据表后获取jQuery错误

我按照说明操作数据表

在安装所有模块并将样式和脚本添加到

angular cli.json

之后，我将使用以下测试数据

但我有两个错误：

错误类型错误：$（…）。DataTable不是函数

错误：NomDatatable元素存在

模块2.ts：

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RouterModule, Routes } from "@angular/router";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { UsuariosComponent } from "./usuarios.component";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { DefaultComponent } from "../../default.component";
import { LayoutModule } from "../../../../layouts/layout.module";
import { DataTablesModule } from "angular-datatables";

// This Module's Components
const routes: Routes = [
  {
    path: "",
    component: DefaultComponent,
    children: [
      {
        path: "",
        component: UsuariosComponent
      }
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    LayoutModule,
    NgbModule.forRoot(),
    FormsModule,
    ReactiveFormsModule,
    DataTablesModule
  ],
  declarations: [UsuariosComponent]
})
export class UsuariosModule {}

组件1.ts：

import { Component, Input, OnInit, ViewEncapsulation } from "@angular/core";
import { ModalDismissReasons, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
import { ScriptLoaderService } from "../../../../../_services/script-loader.service";
import { ToastrService } from "ngx-toastr";

@Component({
  selector: "app-base-data-json",
  templateUrl: "./usuarios.component.html",
  encapsulation: ViewEncapsulation.None
})


export class UsuariosComponent {
  constructor(
    private _script: ScriptLoaderService,
    private toastr: ToastrService
  ) {}

  ngOnInit() {}

  ngAfterViewInit() {
    this._script.loadScripts("app-base-data-json", [
      "assets/app/base/usuarios/get-usuarios.js"
    ]);
  }
}

Component.html：

<table datatable class="row-border hover">
        <thead>
          <tr>
            <th>ID</th>
            <th>First name</th>
            <th>Last name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Foo</td>
            <td>Bar</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Someone</td>
            <td>Youknow</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Iamout</td>
            <td>Ofinspiration</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Yoda</td>
            <td>Skywalker</td>
          </tr>
          <tr>
            <td>5</td>
            <td>Patrick</td>
            <td>Dupont</td>
          </tr>
          <tr>
            <td>6</td>
            <td>Barack</td>
            <td>Obama</td>
          </tr>
          <tr>
            <td>7</td>
            <td>François</td>
            <td>Holland</td>
          </tr>
          <tr>
            <td>8</td>
            <td>Michel</td>
            <td>Popo</td>
          </tr>
          <tr>
            <td>9</td>
            <td>Chuck</td>
            <td>Norris</td>
          </tr>
          <tr>
            <td>10</td>
            <td>Simon</td>
            <td>Robin</td>
          </tr>
          <tr>
            <td>11</td>
            <td>Louis</td>
            <td>Lin</td>
          </tr>
          <tr>
            <td>12</td>
            <td>Zelda</td>
            <td>Link</td>
          </tr>
        </tbody>
      </table>

---

我做错了什么？关于

您试图在哪个组件中显示表？我用component@yerYou更新了我的问题，您不应该将jQuery与Angular一起使用。如果要使用datatable，请使用不带jQuery的库，如Priming、ngBootstrap和MDBAngular文档，推荐jQuery？它应该与npm提供的包一起工作@PatricioVargas@Pedro请看这里我写的为什么不应该将jQuery与Angular一起使用。最好的选择是（按顺序）AgGrid、PrimeNG Turbo表和物料表。在为时已晚之前，省省你自己的麻烦吧

 "styles": [
        "styles.scss",
        "../node_modules/ngx-toastr/toastr.css",
        "../node_modules/datatables.net-dt/css/jquery.dataTables.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/datatables.net/js/jquery.dataTables.js"
      ],