我正在尝试为库构建自定义ngx-pagination,而我
引用链接https://github.com/michaelbromley/ngx-pagination但我不
了解我需要做什么来构建自定义分页。它不响应
点击事件。
HTML
<table class="table">
<thead>
<tr>
<th>SL</th>
<th>Ref</th>
<th>Project Name</th>
<th>Product Owner</th>
<th>Project Type</th>
<th>Remaining Days</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let project of projects | paginate: { itemsPerPage: 7, currentPage: p } ;let ndx = index" >
<td>{{ndx+1}}</td>
<td>{{project.ref}}</td>
<td>{{project.projectName}}</td>
<td>{{project.productOwner}}</td>
<td>{{project.projectType}}</td>
<td>{{project.days}}</td>
<td>{{project.status}}</td>
</tr>
</tbody>
</table>
<pagination-template #p="paginationApi"
(pageChange)="pageChange.emit($event)">
<div class="pagination-previous" [class.disabled]="p.isFirstPage()">
<a *ngIf="!p.isFirstPage()" (click)="p.previous()"> < </a>
</div>
<div *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
<a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
<span>{{ page.label }}</span>
</a>
<div *ngIf="p.getCurrent() === page.value">
<span>{{ page.label }}</span>
</div>
</div>
<div class="pagination-next" [class.disabled]="p.isLastPage()">
<a *ngIf="!p.isLastPage()" (click)="p.next()"> > </a>
</div>
自定义-COMPONENT.TS
@Input() id: string;
@Input() maxSize: number;
@Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
page: number = 1;
pageChanged(event){
console.log("pageChanged");
}
要使其工作还需要进行哪些更改?我在这里遗漏了一些东西我已经使用npm安装了库。请建议。
答案 0 :(得分:1)
解决了这个问题。想要命名冲突。
<强> HTML 强>
<pagination-template #pT="paginationApi"
(pageChange)="p = $event">
<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>