javascript - Angular 9：将 Angular Datatable 与 DataTables Buttons 扩展一起使用，但 dt-button-collection 附加在正文的末尾？

Question

将 Angular Datatable 与 DataTables 按钮扩展一起使用，但 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">&nbsp; XLS',
            exportOptions: {
              columns: ':visible'
            }
          },
          {
            extend: 'pdf',
            text: '<img src="assets/images/pdf-mis.png" width="24"> &nbsp;PDF',
            exportOptions: {
              columns: ':visible'
            },
            orientation: 'landscape'
          },
          {
            extend: 'csv',
            text: '<img src="assets/images/csv.png" width="24">&nbsp; CSV',
            exportOptions: {
              columns: ':visible'
            }
          },

        ]
      }

    ]
  };
}

<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"

我在这里做错了什么？是版本问题吗？

标签： javascriptangular-datatablesexport-csvdatatable-buttons