我有两个组成部分:
list.component和分页组件,在list组件中,我想编写列表记录的逻辑,并且我想使用ngx-pagination npm package来控制给定列表的分页:
list.component.html:
<table id="example" class="patients-listing">
<thead>
<tr>
<th>Member</th>
<th>Phone</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let record of data['data'] | paginate: { id: 'server', itemsPerPage: 40, currentPage: patientsData['pagination']['current_page'], totalItems: patientsData['pagination']['total'] }">
<td>{{record.firstname}}</td>
<td>{{record.phone}}</td>
<td>{{record.email}}</td>
<td><a class="action" href="javascript:void">edit</a></td>
</tr>
</tbody>
</table>
<div class="group-pagination">
<pagination-control id= "server" maxSize="5" (pageChange)="getUsers($event)"></pagination-control>
</div>
list-component.ts
import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
import { UserService } from '@app/services';
@Component({
selector: 'listing',
templateUrl: './list.component.html',
styleUrls: ['./list.component.scss']
})
export class ListMyPatientsComponent implements OnInit, AfterViewInit {
private currentPageNum = 1;
private perPage = 40;
data = null
constructor(private _userService: UserService) {
this.getUsers(this.currentPageNum);
}
ngOnInit() {
this._userService.currentUsersList$.subscribe((usersList)=>
{
if(usersList)
{
this.data = usersList
}
})
}
ngAfterViewInit()
{
}
getCareGroup(pageNum)
{
this._userService.triggerCallForUsers({"page":this.currentPageNum, "perPage":this.perPage})
}
}
到目前为止,我的服务器端分页工作正常。
现在我要使用PaginationControlsDirective以便可以进行分页 模板放入list-pagination.component.html中,然后我可以根据需要对此模板进行一些更改。但是当我写这个模板逻辑到 list-pagination.component.html,然后将pageChange事件发送到list.component,我没有得到正确的输出,我只接收了甚至无法点击的分页号,例如1 2 3 ... 35>。
我在下面尝试过
list-pagination.component.html:
<pagination-template id= "server" maxSize="5" #pT="paginationApi"
(pageChange)="pageChanged()">
<div class="pagination-previous" [class.disabled]="pT.isFirstPage()">
<a *ngIf="!pT.isFirstPage()" (click)="pT.previous()"> < </a>
</div>
<div *ngFor="let page of pT.pages" [class.current]="pT.getCurrent() === page.value">
<a (click)="pT.setCurrent(page.value)" *ngIf="pT.getCurrent() !== page.value">
<span>{{ page.label }}</span>
</a>
<div *ngIf="pT.getCurrent() === page.value">
<span>{{ page.label }}</span>
</div>
</div>
<div class="pagination-next" [class.disabled]="pT.isLastPage()">
<a *ngIf="!pT.isLastPage()" (click)="pT.next()"> > </a>
</div>
</pagination-template>
list-pagination.component.ts:
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'cg-pagination',
templateUrl: './list-pagination.component.html',
styleUrls: ['./list-pagination.component.scss']
})
export class PaginationComponent implements OnInit {
@Input() id: string;
@Input() maxSize: number;
@Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
page = 1;
pageChanged(event){
this.pageChange.emit(event)
}
constructor() { }
ngOnInit() {
}
}
然后在列表组件中添加分页组件:
<cg-pagination (pageChange)="getCareGroup($event)"></cg-pagination>
然后我只有以下输出用于分页:
需要帮助以正确的方式实施它。
谢谢!
我的问题与此类似:
Ngx-pagination does not work for custom component,但我没有得到答案中的解释。 OP自己回答了。
答案 0 :(得分:0)
您的ngx分页模板(pagination-template
)在组件内部,并且未与paginationApi
通信。它应该与使用paginate
管道的列表位于同一视图中。像这样:
<div *ngFor="let item of items | paginate: config">{{itemContent}}</div>
<pagination-template #p="paginationApi" [id]="config.id"
(pageChange)="config.currentPage = $event">
<your-component [paginationData]="p"></your-component>
</pagination-template>
在组件内部,扩展paginationControls:
import { Component, Input } from '@angular/core';
import { PaginationControlsComponent, PaginationControlsDirective } from 'ngx-pagination';
@Component({
selector: 'your-component'
...
})
export class YourComponent extends PaginationControlsComponent {
@Input('paginationData') p: PaginationControlsDirective;
constructor() {
super()
}
}
这是ngx-pagination github本身中的exemplified