Angular 8 ng-bootstrap 5 表格排序不起作用

Question

我有一个使用 .NET Core 3.1 和 Angular 8 ("@angular/core": "8.2.12") 的项目。
从 Web API 获取和订阅数据的部分运行良好。
现在我正在尝试执行可排序、分页和过滤表，因此我从this question 中找到了ng-bootstrap 和working code。

设置完成后，我在 PowerShell 中运行 install cmd：

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

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

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

然后我尝试按照工作代码向我的表格添加排序功能，但我无法单击标题对数据进行排序。

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

• 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]

（我将类名从 NgbdTableComplete 更改为 NgbdTableComponent）

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

但我仍然无法单击表格标题对表格进行排序。
在这个过程中我错过了什么吗？

Answer 1

• 组件/指令/管道应添加到 app.module 的声明数组中，如下所示

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

• 在working code (styles.css) 中包含下面的 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);
   }