问题描述
将 Angular Datatable 与 DataTables Buttons 扩展一起使用，但 dt-button-collection 附加在正文的末尾，为什么？
css/js 存在一些问题。
dtOptions: any = {};
dtTrigger: any = new Subject();
ngOnInit() {
this.dtOptions = {
pagingType: 'full_numbers',pageLength: 10,dom: 'Blfrtip',buttons: [{
extend: 'collection',text: 'Export Data',className: 'exp_d_btn',buttons: [{
extend: 'excel',text: '<img src="assets/images/xls.png" width="24"> XLS',exportOptions: {
columns: ':visible'
}
},{
extend: 'pdf',text: '<img src="assets/images/pdf-mis.png" width="24"> PDF',exportOptions: {
columns: ':visible'
},orientation: 'landscape'
},{
extend: 'csv',text: '<img src="assets/images/csv.png" width="24"> CSV',]
}
]
};
}<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table" id="grid">
<thead>
<tr>head1
</tr>
<tr>head2
</tr>
</thead>
<tbody>
<tr *ngFor="let val of tableData">
<td>{{val.val1}}</td>
<td>{{val.val2}}</td>
</tr>
</tbody>
</table>这是我使用的依赖项 angular.json 文件
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css","node_modules/bootstrap/dist/css/bootstrap.css","node_modules/nprogress/nprogress.css","src/assets/css/bootstrap.min.css","src/assets/css/font-awesome.min.css","src/assets/css/custom.css","src/assets/css/responsive.css","src/assets/css/style.css","src/assets/css/px-pagination.css","src/styles.scss","node_modules/owl.carousel/dist/assets/owl.carousel.min.css","node_modules/owl.carousel/dist/assets/owl.theme.default.min.css","node_modules/owl.carousel/dist/assets/owl.theme.default.css","node_modules/daterangepicker/daterangepicker.css","node_modules/datatables.net-dt/css/jquery.dataTables.css","src/assets/js/jquery-ui-1.12.1/jquery-ui.min.css","src/assets/css/jquery.ui.timepicker.css","node_modules/@ng-select/ng-select/themes/default.theme.css","node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css"
],"scripts": [
"node_modules/nprogress/nprogress.js","node_modules/jquery/dist/jquery.js","node_modules/bootstrap/dist/js/bootstrap.min.js","src/assets/js/jquery-1.12.4.min.js","src/assets/js/add.js","src/assets/js/respond.min.js","node_modules/icheck/icheck.min.js","node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js","src/assets/js/scrolltopcontrol.js","node_modules/raphael/raphael.min.js","src/assets/js/morris.js-0.5.1/morris.min.js","node_modules/owl.carousel/dist/owl.carousel.min.js","node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js","node_modules/chart.js/dist/Chart.js","src/assets/js/jquery-jvectormap-2.0.5.min.js","src/assets/js/jquery-jvectormap-world-mill-en.js","node_modules/daterangepicker/daterangepicker.js","src/assets/js/opentok.min.js","node_modules/datatables.net/js/jquery.dataTables.js","src/assets/js/jquery-ui-1.12.1/jquery-ui.min.js","src/assets/js/jquery.ui.timepicker.js","node_modules/jszip/dist/jszip.js","node_modules/datatables.net-buttons/js/dataTables.buttons.js","node_modules/datatables.net-buttons/js/buttons.colVis.js","node_modules/datatables.net-buttons/js/buttons.flash.js","node_modules/datatables.net-buttons/js/buttons.html5.js","node_modules/datatables.net-buttons/js/buttons.print.js","node_modules/pdfmake/build/pdfmake.min.js","node_modules/pdfmake/build/vfs_fonts.js"
]dt-button-collection 附加到 
并在单击导出按钮 
这是package.json文件
"dependencies": {
"@angular/animations": "~9.1.12","@angular/cdk": "^9.0.1","@angular/common": "~9.1.12","@angular/compiler": "~9.1.12","@angular/core": "~9.1.12","@angular/forms": "~9.1.12","@angular/material": "^9.0.1","@angular/material-moment-adapter": "^10.1.3","@angular/platform-browser": "~9.1.12","@angular/platform-browser-dynamic": "~9.1.12","@angular/router": "~9.1.12","@ng-select/ng-select": "^5.0.3","@ngx-translate/core": "^13.0.0","@ngx-translate/http-loader": "^6.0.0","angular-datatables": "^9.0.2","bootstrap": "^4.5.2","bootstrap-datepicker": "^1.9.0","chart.js": "^2.9.3","datatables.net": "^1.10.21","datatables.net-buttons": "^1.7.0","datatables.net-buttons-dt": "^1.7.0","datatables.net-dt": "^1.10.21","daterangepicker": "^3.1.0","glyphicons": "^0.2.0","highcharts": "^8.2.0","highcharts-angular": "^2.8.0","icheck": "^1.0.2","jquery": "^3.5.1","jszip": "^3.6.0","malihu-custom-scrollbar-plugin": "^3.1.5","moment": "^2.27.0","ng2-charts": "^2.4.0","ngx-countdown": "^11.0.0","ngx-daterangepicker-material": "^4.0.1","ngx-pagination": "^5.0.0","ngx-print": "^1.2.0-beta.5","ngx-webcam": "^0.3.0","nprogress": "^0.2.0","opentok": "^2.10.0","owl.carousel": "^2.3.4","pdfmake": "^0.1.70","raphael": "^2.3.0","rickshaw": "^1.7.1","rxjs": "^6.5.5","tslib": "^1.10.0","zone.js": "~0.10.2"
},"devDependencies": {
"@angular-devkit/build-angular": "~0.901.12","@angular/cli": "~9.1.12","@angular/compiler-cli": "~9.1.12","@types/datatables.net": "^1.10.19","@types/datatables.net-buttons": "^1.4.5","@types/jasmine": "~3.5.0","@types/jasminewd2": "~2.0.3","@types/jquery": "^3.5.1","@types/node": "^12.11.1","codelyzer": "^5.1.2","jasmine-core": "~3.5.0","jasmine-spec-reporter": "~4.2.1","karma": "~5.0.0","karma-chrome-launcher": "~3.1.0","karma-coverage-istanbul-reporter": "~2.1.0","karma-jasmine": "~3.0.1","karma-jasmine-html-reporter": "^1.4.2","protractor": "~7.0.0","ts-node": "~8.3.0","tslint": "~6.1.0","typescript": "~3.8.3"我在这里做错了什么？是版本问题吗？
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）