Question

我按照install Angular Datatables

的说明进行操作

安装所有模块并添加样式和脚本到angular-cli.json后，我使用this等测试数据

但我得到两个错误：

ERROR TypeError：$（...）。DataTable不是函数

错误错误：存在NomDatatable元素。

Module.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 {}

Component.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>

角-CLI

 "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"
      ],

我做错了什么？此致

安装Angular Datatables后出现jQuery错误

0 个答案: