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

Question

Я работаю над 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/ 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>

Answer 1

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

declare var $ = any;

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

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