角度 8 ng-bootstrap 5 表排序不起作用

Question

我有一个使用.NET Core 3.1和Angular 8("@angular/core": "8.2.12"(的项目。
从 Web API 获取和订阅数据的部分运行良好。
现在我正在尝试执行可排序、分页和过滤表，所以我从这个问题中找到了 ng-bootstrap 和工作代码。

安装完成后，我在PowerShell中运行安装cmd：

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

将此添加到我的应用程序模块.ts：

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

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

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

• 国家.ts
• 国家.服务.ts
• 国家.ts
• sortable.directive.ts
• 表完成.html
• 表完整.ts

并在 My app.module.ts 中为 table-complete.html 页面设置路由和声明：

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

(我将类名从 NgbdTableComplete 更改为 NgbdTableComponent(

这是屏幕截图： 分页和过滤功能运行良好。

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

Answer 1

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

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

• 包括以下来自工作代码(样式.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);
  }