Я бы хотел попросить о помощи.Я должен сделать общий типовой угловой материал, который получает данные из веб-сервиса Jira.Моя проблема в том, что в некоторых случаях мне придется выполнять нумерацию страниц на клиентском сайте, а в некоторых случаях - в 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 к компоненту таблицы?
Заранее спасибо, ребята!
Редактировать Удалены тайм-ауты из кода, чтобы избежать путаницы