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个结果。在后一种情况下，服务器端分页是我所知道的正确方法，但是如果结果低于合理数量，则我想使用客户端分页，这也是因为Chart使用物料表中的数据。

如何在不向表组件添加另一个@Input的情况下解决此问题？

谢谢大家！

修改从代码中删除了超时以避免混淆

Angular 6物料表服务器和客户端分页

0 个答案: