我是角度新手，我想在我的项目中实现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"
],
我在这个模块下创建一个模块作为管理员我创建一个组件作为manage-blogs，在tis组件中我绑定表中的动态数据。
我的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文件上它工作。
如果您使用的是Angular，请尝试使用angular-datatable。根据我的经验，这是最好的。 https://www.npmjs.com/package/angular-datatables。