Question

我正在使用Angular 6，我想应用角度数据表，但是它给出了以下错误。如何解决以下错误并应用Angular数据表。

出现下面的错误

ERROR TypeError: $(...).DataTable is not a function
    at eval (angular-datatables.umd.js:46)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (ng_zone.ts:264)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at ZoneTask.invokeTask (zone.js:496)
    at ZoneTask.invoke (zone.js:485)
    at timer (zone.js:2054)

我已遵循此https://l-lin.github.io/angular-datatables/#/getting-started URL来获取数据表。

我已经在项目中安装了以下所有依赖项。

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

我在HEAD标记的_Layout文件中添加了以下文件。

<link href="~/node_modules/datatables.net-dt/css/jquery.dataTables.css" rel="stylesheet" />
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/datatables.net/js/jquery.dataTables.js"></script>

之后，我在Systemjs.Config.js文件中添加了以下几行

'jquery': 'npm:jquery/dist/jquery.js',
'datatables.net': 'npm:Datatables.net/js/jquery.dataTables.js',
'angular-datatables': 'npm:angular-datatables/bundles/angular-datatables.umd.js',

在app.module.ts中导入数据表

import { DataTablesModule } from 'angular-datatables';
@NgModule({
    imports: [BrowserModule, HttpClientModule, DataTablesModule],
    providers: []  //declared employee component also as a root component
})

最后是我的html文件

<h1> This is our TL Dashboard</h1>
<table border="1" datatable class="table-hover">
    <thead>
        <tr>
            <td>Name</td>
            <td>BASIC</td>
            <td>DEPARTMENT NAME</td>
            <td>DESIGNATION DESC</td>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let employee of EmployeeDetails.Table1">
            <td>{{employee.EMP_NAME}}</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>


    </tbody>
</table>

Answer 1

您需要像这样在组件类的顶部声明$-

declare var $ = any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
.....

PS：同样好的做法是在angular.json文件中而不是在index.html文件中添加所有类似jQuery的依赖项

如何应用角度数据表？

1 个答案: