Angular 8 ng-bootstrap 5 table 排序无效

Question

我有一个项目正在使用 .NET Core 3.1 和 Angular 8 ("@angular/core": "8.2.12")。
从 Web API 获取和订阅数据的部分运行良好。
现在我正在尝试执行 sortable、分页和过滤 table，所以我找到 ng-bootstrap and the working code from .

设置之后，我运行在 PowerShell 中安装命令：

ng add @ng-bootstrap/ng-bootstrap@5.3.1

将此添加到我的 app.module.ts:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  imports: [
    NgbModule
  ]

然后我尝试按照工作代码为我的 table 添加排序功能，但我无法单击 header 对数据进行排序。

所以我将这些文件从工作代码复制到我的项目中：

countries.ts
country.service.ts
country.ts
sortable.directive.ts
table-complete.html
table-complete.ts

并在我的 app.module.ts:

中为 table-complete.html 页面设置路由和声明

@NgModule({
  declarations: [
    NgbdTableComponent
  ],
  providers: [AppComponent, NgbdTableComponent, NgbdSortableHeader]

（我将 class 名称从 NgbdTableComplete 更改为 NgbdTableComponent）

截图如下： The pagination and filtering functions are working well.

但是我还是不能点击table header来对table.
进行排序在此过程中我错过了什么吗？

Answer 1

Components/directives/pipes 应添加到 app.module 的声明数组中，如下所示

 @NgModule({
 declarations: [
 AppComponent, 
 NgbdTableComponent, 
 NgbdSortableHeader
 ],
 imports:[BrowserModule, 
          HttpClientModule, 
          NgbModule
          ],
 providers: [] 
 })

在 css 下方包含来自 working code (styles.css) 以显示排序箭头

th[sortable] 
  {
   cursor: pointer;
   user-select: none;
   -webkit-user-select: none;
   }

 th[sortable].desc:before, th[sortable].asc:before {
   content: '';
   display: block;
   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAmxJREFUeAHtmksrRVEUx72fH8CIGQNJkpGUUmakDEiZSJRIZsRQmCkTJRmZmJgQE0kpX0D5DJKJgff7v+ru2u3O3vvc67TOvsdatdrnnP1Y///v7HvvubdbUiIhBISAEBACQkAICAEhIAQ4CXSh2DnyDfmCPEG2Iv9F9MPlM/LHyAecdyMzHYNwR3fdNK/OH9HXl1UCozD24TCvILxizEDWIEzA0FcM8woCgRrJCoS5PIwrANQSMAJX1LEI9bqpQo4JYNFFKRSvIgsxHDVnqZgIkPnNBM0rIGtYk9YOOsqgbgepRCfdbmFtqhFkVEDVPjJp0+Z6e6hRHhqBKgg6ZDCvYBygVmUoEGoh5JTRvIJwhJo1aUOoh4CLPMyvxxi7EWOMgnCGsXXI1GIXlZUYX7ucU+kbR8NW8lh3O7cue0Pk32MKndfUxQFAwxdirk3fHappAnc0oqDPzDfGTBrCfHP04dM4oTV8cxr0SVzH9FF07xD3ib6xCDE+M+aUcVygtWzzbtGX2rPBrEUYfecfQkaFzYi6HjVnGBdtL7epqAlc1+jRdAap74RrnPc4BCijttY2tRcdN0g17w7HqZrXhdJTYAuS3hd8z+vKgK3V1zWPae0mZDMykadBn1hTQBLnZNwVrJpSe/NwEeDsEwCctEOsJTsgxLvCqUl2ACftEGvJDgjxrnBqkh3ASTvEWrIDQrwrnJpkB3DSDrGW7IAQ7wqnJtkBnLRztejXXVu4+mxz/nQ9jR1w5VB86ejLTFcnDwhzV+F6T+CHZlx6THSjn76eyyBIOPHyDakhBAQAkJACAgBISAEhIAQYCLwC8JxpAmsEGt6AAAAAElFTkSuQmCC') no-repeat;
   background-size: 22px;
   width: 22px;
   height: 22px;
   float: left;
   margin-left: -22px;
 }

 th[sortable].desc:before {
   transform: rotate(180deg);
   -ms-transform: rotate(180deg);
 }

Angular 8 ng-bootstrap 5 table 排序无效

Angular 8 ng-bootstrap 5 table sorting not working

angular

sorting

html-table

angular8

ng-bootstrap