ngx-datatable

Question

我正在尝试通过实施 Bootstrap 的主题来实施 ngx-datatable。

我在应用程序样式中添加 Bootstrap 4 和 ngx-datatable 中的 Bootstrap CSS：

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.css",
          "node_modules/@swimlane/ngx-datatable/release/themes/bootstrap.css",
          "src/styles.css"
        ],

然后在我的页面组件上实现 table：

<ngx-datatable class="bootstrap"
[rows]="tablePage.results"
[columns]="columns"
[columnMode]="'force'"
[rowHeight]="'auto'"
[headerHeight]="50"
[footerHeight]="50"
[externalPaging]="true"
[loadingIndicator]="loading"
[count]="tablePage.pager.count"
[offset]="tablePage.pager.offset"
[limit]="tablePage.pager.limit"
[reorderable]="true"
(page)='setPage($event)'>

另外，模块全部导入app模块：

imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
NgbModule,
FontAwesomeModule,
NgxDatatableModule
],

问题在于没有显示第 header 列图标。 None 显示了排序方向图标，我不知道还要添加什么，因为一切看起来都像在演示站点中一样设置。

Answer 1

别忘了包括 node_modules/swimlane/ngx-datatable/release/assets/icons.css

或 sass @import '~@swimlane/ngx-datatable/release/assets/icons.css';

ngx-datatable - Bootstrap 主题 - 专栏 headers

ngx-datatable - Bootstrap theme - Column headers

bootstrap-4

angular-components

angular