Я пытаюсь преобразовать пример динамической таблицы из Angular Material в повторно используемый компонент, у меня пример работал отлично, если у меня есть служба http в дочернем компоненте, однако я хотел бы сделать его пригодным для использования, я решил иметьВызов http в качестве ввода.
У меня есть родительский компонент, передающий наблюдаемые данные из вызовов http.в дочернем компоненте я пытаюсь вызвать вызов http в Parent, передавая полезную нагрузку в onHttpUpdate.
Проблема в том, что когда я получил функцию switchMap, разбиение на страницы не определено.
export class DynammicTableComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator
@ViewChild(MatSort) sort: MatSort
@Input() displayedColumns: string[]
@Output() onHttpUpdate: EventEmitter<any> = new EventEmitter();
@Input() responseData: Observable<HttpDbResponse>
data: Array<any> = []
resultLimits: Array<number> = [10, 25, 50, 100]
resultsLength: number = 0
isLoadingResults: boolean = true
defaultSort: {} = { sort: 'supplierName', order: 'asc', page: 1, pageSize: 10 }
constructor() { }
ngOnInit() {
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 1)
merge(this.sort.sortChange, this.paginator.page, this.paginator.pageSizeOptions)
.pipe(
startWith(this.defaultSort),
switchMap(() => {
this.isLoadingResults = true
this.onHttpUpdate.emit({ sort: this.sort.active, order: this.sort.direction, page: this.paginator.pageIndex + 1, pageSize: this.paginator.pageSize });
return this.responseData;
}),
map(response => {
return response.data
}),
catchError(() => {
console.log('loading data failed...')
this.isLoadingResults = false
return observableOf([])
})
).subscribe(data => this.data = data)
}
}
Заранее спасибо!
Приветствия