Question

我正在使用ASP.NET 5开发Angular 2 Web应用程序。我想在组件中插入一个表。该表是使用此库创建的：http://bootstrap-table.wenzhixin.net.cn/。我注意到，如果表位于组件中，则它不起作用。同时，如果它位于index.html文件中，它可以工作。这可能是由于文件bootstrap-table.css和bootstrap-table.js的链接位于索引中，但index.html应该只包含根组件，所以我必须找到一种方法来实现表工作即使它在组件内部也是如此。这是表格的代码：

<table data-toggle="table" data-url="data1.json" data-height="299">
    <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
    </thead>
</table>

代码应该是正确的，因为它是从这里复制的：http://www.redexperu.com/assets/js/bootstrap-table-master/docs/examples.html。

Answer 1

如果您阅读了插件的源代码（bootstrap-table.js），您会发现，最后，在代码引导之后，所有表都已在DOM中可用：

$(function () {
    $('[data-toggle="table"]').bootstrapTable();
})

如果你正在使用angular1（带路由）或angular2（带组件），那么在angular2需要它之前，表很可能不在DOM中。

你可以做的是在ngAfterViewInit方法（https://angular.io/api/core/AfterViewInit#interface-overview）中手动调用bootstrapTable（）函数

无法在Angular 2组件

1 个答案: