Angular 8 нг- bootstrap 5 сортировка таблиц не работает - PullRequest
Новая
       43

Angular 8 нг- bootstrap 5 сортировка таблиц не работает

0 голосов
/ 19 июня 2020

У меня есть проект, который использует. NET Core 3.1 и Angular 8 ("@angular/core": "8.2.12"). Часть получения и подписки данных из веб-API работает хорошо. Теперь я пытаюсь выполнить таблицу сортировки, разбивки на страницы и фильтрации, поэтому я нахожу ng- bootstrap и рабочий код из этот вопрос .

После настройки я запускаю команду install в PowerShell: 

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

добавьте это в свой app.module.ts: 

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

, а затем я попытался следуйте рабочему коду, чтобы добавить функцию сортировки в мою таблицу, но я не могу щелкнуть заголовок, чтобы отсортировать данные.

поэтому я скопировал эти файлы из рабочего кода в свой проект:

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

и установить маршрут и объявления для table-complete. html page в моем app.module.ts: 

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

(я меняю имя класса с NgbdTableComplete на NgbdTableComponent)

Вот скриншот: Функции нумерации страниц и фильтрации работают нормально. Но я все еще не могу щелкнуть заголовок таблицы, чтобы отсортировать таблицу. Я что-то пропустил в процессе?

1 Ответ

0 голосов
/ 22 июня 2020

  • Компоненты / директивы / каналы должны быть добавлены в массив объявлений 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);
 }
...