Как применить угловой DataTable? - PullRequest
Новая
       7

Как применить угловой DataTable?

0 голосов
/ 17 января 2019

Я работаю над Angular 6 и хочу применить таблицу угловых данных, но она дает ошибку ниже. Как устранить ошибку, указанную ниже, и применить таблицу угловых данных.

получаю ошибку ниже. 

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-Start URL для datatable.

Я установил все нижеуказанные зависимости в моем проекте. 

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

Я добавил следующие файлы в свой файл _Layout в теге HEAD. 

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

1 Ответ

0 голосов
/ 17 января 2019

Вам нужно объявить $ в верхней части класса вашего компонента, как это - 

declare var $ = any;

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

PS: также рекомендуется добавлять все зависимости, такие как jQuery и т. Д., В файл angular.json, а не в файл index.html

...