Я новичок в angular, и я хочу внедрить datatable в свой проект jquery. Когда я внедряю его в демонстрационный проект, он работает отлично, но когда я внедряю его в свой рабочий проект, он показывает ошибку, ниже приведены мои коды
мой файл angular.json
здесь я добавляю
"styles": [
"node_modules/datatables.net-dt/css/jquery.dataTables.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js"
],
я создаю модуль в качестве администратора в этом модуле, я создаю компонент в качестве блогов управления и в этом компоненте я связываю динамические данныев таблице.
мой файл index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Admin Panel</title>
<base href="/">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1,
user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<app-root></app-root>
<!-- jQuery 2.2.3 -->
<script src="assets/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<!-- Bootstrap 3.3.6 -->
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
мой файл manage-blogs-component.ts
import { Component,ViewChild, OnInit } from '@angular/core';
import { BlogService } from '../../services/blog.service';
import { Blog } from '../../models/blog';
declare var $;
@Component({
selector: 'app-manage-blogs',
templateUrl: './manage-blogs.component.html',
styleUrls: ['./manage-blogs.component.css']
})
export class ManageBlogsComponent implements OnInit {
title = 'Manage Blogs';
blogs: Blog;
error: string;
@ViewChild('dataTable') table;
dataTable: any;
constructor(private blogService: BlogService) { }
ngOnInit():void {
this.dataTable = $(this.table.nativeElement);
this.dataTable.DataTable();
this.blogService.getBlogs().subscribe(
(data: Blog) => this.blogs = data,
error => this.error = error
);
}
}
мой файл manage-blog-component.html
<div class="box-body">
<table #dataTable class="table table-bordered table-striped">
<thead>
<tr>
<th>#ID</th>
<th>Image</th>
<th>Title</th>
<th>Created At</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let blog of blogs">
<td>{{blog.id}}</td>
<td><img src="{{blog.image}}" ></td>
<td>{{blog.title}}</td>
<td>{{blog.created_at | date: 'mediumDate'}}</td>
<td class="action">
<a href="#" class="btn btn-info btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-
sm">Delete</a>
</td>
</tr>
</tbody>
</table>
{{error}}
</div>
при загрузке страницы появляется ошибка ОШИБКА TypeError: this.dataTable.DataTable не является функцией Но в другом демонстрационном проекте я поместил код avove в файл app.component, который работает.