angular - Angular 6 材质表服务器和客户端分页

Question

我想寻求一些帮助。我必须制作一个通用的角度材料数据表，从 Jira Web 服务中获取数据。我的问题是，在某些情况下，我必须在客户端站点上进行分页，而在某些情况下，我必须在 Jira 上进行，因为它可以返回的最大结果设置为 1000 个元素。

我必须在客户端进行分页的原因是，在许多情况下，图表嵌入在数据表旁边，必须与所有可用元素一起使用，而不仅仅是在材料表。

我想避免的是有更多的参数来检查我是否必须使用客户端/服务器端分页。

相关代码：

import {
  Component,
  Input,
  ViewChild,
  AfterViewInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef} from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource, MatSlideToggle } from '@angular/material';
import { TableService } from './table.service';
import { merge } from 'rxjs';

@Component({
  selector: 'app-table-component',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TableComponent implements AfterViewInit {

  @Input() dataTypes: any[];
  @Input() columnsToDisplay: string[];
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatSlideToggle) toggle: MatSlideToggle;
  private dataSource: any = new MatTableDataSource<any>();
  private currentPage;
  public selectedTab: any;
  public resultsLength: number;


  constructor(private service: TableService, private ref: ChangeDetectorRef) {}

  ngAfterViewInit() {
    this.service.changeFilter({
      previousPageIndex: 0,
      pageIndex: this.paginator._pageIndex,
      pageSize: 5,
      length: this.paginator._length,
      active: this.sort.active,
      direction: 'asc',
      checked: false
    });
    merge(this.paginator.page, this.sort.sortChange, this.toggle.change).subscribe(res => {
      this.currentPage = this.paginator.pageIndex;
      this.service.changeFilter(res);
    })

    this.service.dataChanged$.subscribe(res => {
      this.dataSource.paginator = this.paginator;
      this.dataSource.data = res.tickets;
      this.dataSource.paginator.pageIndex = this.currentPage;
      this.dataSource.paginator.length = res.results;  
  }

}

这基本上所做的是，在任何事件更改（排序、分页和切换开关上）时，都会将 HTTP 请求发送到 Jira 后端。在大多数情况下，最大结果将是 10-20 个结果，但我有一个屏幕，我必须在其中获取 1000-3000 个结果。在后一种情况下，服务器端分页是我知道的正确方法，但如果结果低于合理数字，我想使用客户端分页，同样因为图表使用材料表中的数据。

在不向表格组件添加另一个 @Input 的情况下，我应该如何解决这个问题？

提前谢谢你们！

编辑 从代码中删除超时以避免混淆

标签： angularangular-materialangular6