Angular 8 ng-bootstrap 5 table 排序无效
Angular 8 ng-bootstrap 5 table sorting not working
我有一个项目正在使用 .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.
进行排序
在此过程中我错过了什么吗?
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);
}
我有一个项目正在使用 .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.
进行排序
在此过程中我错过了什么吗?
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); }