在 Ionic Angular 中使用 Bootstrap-Table

Question

我想在我的 Ionic 项目中使用 Bootstrap Table。我认为它易于使用且反应灵敏，非常适合混合 Web 应用程序。此外，我正在将我的 Angular 项目移植到 Ionic，它已经使用了 Bootstrap Table。 我怎样才能做到这一点？

我尝试使用 npm 安装 Bootstrap

npm install jquery
npm install bootstrap
npm install bootstrap-table

然后添加到

angular.json

"scripts": [...,
"node_modules/jquery/dist/jquery.slim.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.js",
"node_modules/bootstrap-table/dist/bootstrap-table.min.js"                        
]

但我被困在这里了。要渲染表格我应该做

import * as $ from 'jquery';
import 'bootstrap';
import 'bootstrap-table';

var table = jQuery("#table-id");
    table.bootstrapTable('destroy').bootstrapTable({
      data: table_rows,
      columns: table_columns,
    });

我尝试过不使用 jQuery 以这种方式

var table = document.getElementById("table-id") 

但这给出了错误

bootstrapTable is not a function

如果我使用 jQuery，我会收到此错误

reference error:Cannot access uninitialized variable

正确的使用方法是什么？

• jQuery 真的有必要吗？
• 如何正确导入引导脚本？
• 如何执行该函数

  bootstrapTable()

  ？

谢谢你

Answer 1

我用这种方式解决了：以编程方式添加。我知道这不是最好的解决方案，但这是迄今为止唯一有效的解决方案。

    var myScriptElement: HTMLScriptElement;

    // bootstrap table
    myScriptElement = document.createElement("script");
    myScriptElement.src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/extensions/filter-control/bootstrap-table-filter-control.min.js";
    document.body.appendChild(myScriptElement);    
    
    // extension bootstrap table export
    myScriptElement = document.createElement("script");
    myScriptElement.src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/extensions/export/bootstrap-table-export.min.js";
    document.body.appendChild(myScriptElement);        

    // extension bootstrap table locale    
    myScriptElement = document.createElement("script");
    myScriptElement.src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-table-locale-all.min.js";
    document.body.appendChild(myScriptElement);      
    
    // extension bootstrap table export pdf
    myScriptElement = document.createElement("script");
    myScriptElement.src = "https://cdn.jsdelivr.net/npm/[email protected]/libs/jsPDF/jspdf.umd.min.js";
    document.body.appendChild(myScriptElement);      
    
    // extension bootstrap table mobile card
    myScriptElement = document.createElement("script");
    myScriptElement.src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/extensions/mobile/bootstrap-table-mobile.min.js";
    document.body.appendChild(myScriptElement);