Фильтрация и разбиение на страницы не работают с шаблоном ngxpagination - PullRequest
Новая
       30

Фильтрация и разбиение на страницы не работают с шаблоном ngxpagination

0 голосов
/ 19 февраля 2019

У меня есть пользовательская реализация шаблона нумерации страниц, которая работает нормально.Однако, когда я пытаюсь использовать трубу фильтра с разбивкой на страницы, разбивка на страницы разбивается: элементы управления разбивкой на страницы остаются такими же, как и до применения фильтра, и отфильтрованный набор данных больше не разбивается на страницы (11 элементов отображаются на экране вместо 10),Элементы управления разбиением на страницы по-прежнему видны в нижней части страницы при фильтрации, но не влияют на отфильтрованные данные, т.е. не меняют страницу.

Компонент HTML 

<task-manager-record *ngFor="let record of filteredDraftRecords | draftFilter: draftFilterArg | paginate: getPaginationOptions(tabIndex); let i = index;" [record]="record"></oir-task-manager-record>
<div class="totalRecords">
    <label>Total </label>
    {{ (filteredDraftRecords | draftFilter:draftFilterArg)?.length }}
</div>
<pagination *ngIf="(filteredDraftRecords | draftFilter:draftFilterArg)?.length > getPaginationOptions(tabIndex).itemsPerPage"
          (pageChange)="onChangePage($event)"
          [options]="getPaginationOptions(tabIndex)">
</pagination>

Компонент ts 

import { Component, OnInit } from '@angular/core';
import { RecordViewModel } from '../models/app.models';
import { MotionStatus } from '../models/enum.model';
import { PaginationOptions } from 'proceduralsystem-clientcomponents';
import { SelectItem } from '@motions/motions.model';
import { TaskManagerService } from './task-manager.service';

@Component({
  selector: 'task-manager',
  templateUrl: './task-manager.component.html',
  styleUrls: ['./task-manager.component.less']
})
export class TaskManagerComponent implements OnInit {

  draftrecords = new Array<RecordViewModel>();
  filteredDraftRecords = new Array<RecordViewModel>();

  motionStatus = MotionStatus;
  draftFilterArg = 0;
  tabIndex = 0;
  page: { [id: string]: number} = {};
  currentPage = 1;

  constructor(
    public taskManagerService: TaskManagerService
  ) {
  }

  ngOnInit(): void {
    this.loadDraftRecords();
  }

  loadDraftRecords(): void {
    this.taskManagerService.getDraftMotions().subscribe(m => {
    this.draftRecords = m.Records;
      this.filteredDraftRecords = this.draftRecords;
    });
  }


  // Pagination functions
  getPaginationOptions(tabIndex: number): PaginationOptions {
    const paginationId = `tab${tabIndex}`;

    return {
      id: 'tab',
      itemsPerPage: 10,
      currentPage: this.page[paginationId],
      totalItems: this.draftRecords.length
    };
  }

  onChangePage(pageNumber) {
    this.page[`tab${this.tabIndex}`] = pageNumber;
  }

}

Фильтр Импорт трубы {Pipe, PipeTransform} из '@ angular / core'; 

@Pipe({
  name: 'draftFilter'
})
export class DraftFilterPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if(args) {
      return value.filter(item => item.status.id === args);
    } else {
      return value;
    }
  }
}

Редактировать: Добавлена ​​демонстрация.Код немного отличается, переработан для удаления ненужного кода.https://stackblitz.com/edit/angular-fnbnaw

1 Ответ

0 голосов
/ 22 февраля 2019

Кажется, что некоторые переменные в App Componnet, draftFilterArg и tableindex представляют некоторую путаницу.Я заменил tableindex на draftFilterArg.Также переписали функцию getTabTotal с помощью функции pipe.

Также есть ошибка в компоненте Pagination, "page n of lastpage", когда последняя страница должна вызывать функцию getLastPage (), а не переменную lastpage.

Проверьте результат здесь: https://stackblitz.com/edit/angular-mcmpbe

...