我有两个组件:
list.component 和分页组件,在列表组件中我想编写列出记录的逻辑,并且我想使用ngx-pagination npm 包控制给定列表的分页:
列表.组件.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>
列表组件.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})
}
}
到目前为止,我的服务器端分页工作得很好。
现在我想用分页控件指令这样我就可以分页
将模板放入 list-pagination.component.html 中,然后我可以根据要求对此模板进行一些更改。但是当我写这个模板逻辑时
list-pagination.component.html 然后将 pageChange 事件发送到 list.component 我没有得到正确的输出,我只收到分页号,如 1 2 3... 35 > 甚至不可单击。
我尝试如下:
列表分页.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>
列表分页.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>
然后我只得到以下分页输出:
需要帮助以正确的方式实施它。
Thanks!
我的问题与此类似:
ngx-pagination 不适用于自定义组件但我没有得到其答案中解释的内容。 OP自己已经回答了。