У меня есть шаблон, который использует bootstrap и HTML5, который не был создан для angular, но который я пытаюсь адаптировать к angular.
В моем файле angular.json есть следующие строки:
"styles": [
"src/styles.css",
"src/assets/fonts/icomoon/icomoon.css",
"src/assets/vendor/circliful/circliful.css",
"src/assets/vendor/c3/c3.min.css",
"src/assets/css/bootstrap.min.css",
"src/assets/css/main.css"
],
"scripts": [
"src/assets/js/jquery.js",
"src/assets/js/bootstrap.min.js",
"src/assets/js/popper.min.js",
"src/assets/vendor/slimscroll/slimscroll.min.js",
"src/assets/vendor/slimscroll/custom-scrollbar.js",
"src/assets/vendor/circliful/circliful.min.js",
"src/assets/vendor/circliful/circliful.custom.js",
"src/assets/vendor/peity/peity.min.js",
"src/assets/vendor/peity/custom-peity.js",
"src/assets/vendor/d3/d3.min.js",
"src/assets/vendor/c3/c3.min.js",
"src/assets/vendor/c3/custom/bar-graph-one.js",
"src/assets/js/common.js"
]
Каждый файл assets взят из этого шаблона.Теперь мне нужно вставить таблицу данных jquery в мой home.component.html, поэтому я установил таблицы данных с помощью npm:
npm install datatables.net --save
npm install datatables.net-bs4 --save
И после этого я вставил этот код в файл home.component.ts:
import 'datatables.net';
import 'datatables.net-bs4';
declare var $ :any;
...
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
//for jquery datatable
datatable: any;
constructor(private service: HomeService, private sanitizer: DomSanitizer) {
}
ngOnInit() {
const table: any = $('#notas-table');
this.datatable = table.DataTable();
}
}
Теперь, после загрузки страницы, я получил эту ошибку:
ОШИБКА TypeError: table.DataTable не является функцией
Просмотр vendor.js файлаесть данные:
/***/ "./node_modules/datatables.net/js/jquery.dataTables.js":
/*!*************************************************************!*\
!*** ./node_modules/datatables.net/js/jquery.dataTables.js ***!
\*************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
Я пытался поместить его в AfterViewInit, но я получаю ту же ошибку:
ngAfterViewInit(): void {
const table: any = $('#notas-table');
this.datatable = table.DataTable();
}