Ngx分页不适用于自定义组件 [英] Ngx-pagination does not work for custom component

问题描述

我正在尝试为该库构建自定义的ngx分页，而我

I am trying to build a custom ngx-pagination for the library and I am

引用链接 https://github.com/michaelbromley/ngx-pagination 但是我不

了解构建自定义分页所需的操作.它不响应

understand what I need to do to build the custom pagination.It does not respond to

点击事件.

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>

CUSTOM-COMPONENT.TS

@Input() id: string;
@Input() maxSize: number;
@Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
page: number = 1;

 pageChanged(event){
    console.log("pageChanged");
  }

要使其正常工作，还需要进行哪些其他更改?我是否在这里丢失了一些我使用npm安装的库.请提出建议.

What else changes are required to make it work?Am I missing something here I have installed the library using npm.Please suggest.

推荐答案

已解决了该问题.似乎是在命名冲突.

Solved the issue.Seems to be naming conflict.

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> 

这篇关于Ngx分页不适用于自定义组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！