У меня есть таблица, возвращающая данные для URL-адреса API, и данные по умолчанию разбиты на страницы с сервера. Я хочу вызывать новые данные, когда я нажимаю на страницу 2
, 3
, etc.
и возвращаю данные этой страницы с сервера.
Я использую дизайн муравья для своей таблицы, и, честно говоря, я не очень понимаю их методы обратного вызова в документах, поэтому я ищу помощь, чтобы это произошло. документы
Script
listOfData: DataItem[] = []
limit = ''
page = ''
pages = ''
ngOnInit(): void {
this.getList();
}
getList() {
this.helpdeskService.getList().subscribe((res) => {
this.listOfData = res.data;
this.limit = res.limit //10
this.page = res.page //1
this.pages = res.pages //2
if (this.listOfData.length > 0){
this.isSpinning = false;
} else {
this.isSpinning = true;
}
},
(error) => {
console.info('data', error)
});
}
HTML
<ng-template #rangeTemplate let-range = "range" let-total>Display {{ range[1] }} of {{ total }} items </ng-template>
<nz-table
#filterTable
nzShowSizeChanger
(nzCurrentPageDataChange) = "onCurrentPageDataChange($event)"
[nzData] = "listOfData" class = "kit__utils__table mb-4"
[nzPageSizeOptions] = "[5, 10, 20, 30, 40]"
[nzPageSize] = "limit"
[nzPageIndex] = "page"
[nzShowTotal] = "rangeTemplate">
<thead>
//...
</thead>
<tbody>
..//
</tbody>
</nz-table>
Есть идеи?
Вам нужно добавить обратный вызов при изменении pageIndex
добавить [nzTotal] = "totalPages" (nzPageIndexChange) = "onPageIndexChange($event)"
в шаблон
HTML
<ng-template #rangeTemplate let-range = "range" let-total>Display {{ range[1] }} of {{ total }} items </ng-template>
<nz-table
#filterTable
nzShowSizeChanger
(nzCurrentPageDataChange) = "onCurrentPageDataChange($event)"
(nzPageIndexChange) = "onPageIndexChange($event)"
[nzData] = "listOfData" class = "kit__utils__table mb-4"
[nzPageSizeOptions] = "[5, 10, 20, 30, 40]"
[nzPageSize] = "limit"
[nzPageIndex] = "page"
[nzTotal] = "totalPages"
[nzFrontPagination] = "false"
[nzShowPagination] = "true"
[nzShowTotal] = "rangeTemplate">
<thead>
//...
</thead>
<tbody>
..//
</tbody>
</nz-table>
добавить это в файл ts
getList(pageIndex: number | null): Observable < any > {
const endpoint=pageIndex? `${this.env.HELPDESK_LIST}?start=${pageIndex}&limit=5`: this.env.HELPDESK_LIST
const tokenPromise =
this.token === undefined
? store.get('accessToken')
: Promise.resolve(this.token);
return from(tokenPromise).pipe(
switchMap((token) => {
this.token = this.token;
const httpOptions = {
headers: new HttpHeaders({
Accept: 'application/json, text/plain',
'Content-Type': 'application/json',
Authorization: 'Token ' + this.token,
}),
};
return this.http
.get(endpoint, httpOptions)
.pipe(map((data) => data));
})
);
}
getList(pageIndex) {
this.helpdeskService.getList(pageIndex).subscribe((res) => {
this.listOfData = res.data;
this.limit = res.limit //10
this.page = res.page //1
this.totalPages = res.total
this.pages = res.pages //2
if (this.listOfData.length > 0){
this.isSpinning = false;
} else {
this.isSpinning = true;
}
},
(error) => {
console.info('data', error)
});
}
onPageIndexChange(pageIndex: number | null){
console.info(pageIndex) // get you the page index
// make api call requesting data for only that page index
this.getList(pageIndex)
}
Комментарии не для расширенного обсуждения; этот разговор был перемещен в чат.