Question

所以我开始使用Angular2并尝试通过ng2-pagination组件添加分页，经过大量的试验和错误我已经达到我的数据正确显示的阶段，分页控件正确显示但页面更改没有被解雇，所以我总是留在第一页。

这是我的HTML

  <div id="item_box" *ngFor="let item of listItems | paginate: 
           {itemsPerPage: 3, currentPage: page};">
             <! -- Elements to display my data items, all works OK -->
  </div>

    <div id="pager" class="pagination">
       <pagination-template #p="paginationApi" (pageChange)="pageChange.emit($event)">

       <ul>
          <li [class.disabled]="p.isFirstPage()">
               <a (click)="p.setCurrent(1)">First</a>
           </li>
           <li [class.disabled]="p.isFirstPage()">
               <a (click)="p.previous()">Previous</a>
            </li>


            <li *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
                <a (click)="p.setCurrent(page.value)">{{page.value}}</a>
             </li>
             <li [class.disabled]="p.isLastPage()">
                 <a (click)="p.next()">Next</a>
             </li>
             <li [class.disabled]="p.isLastPage()">
                  <a (click)="p.getLastPage()">Last</a>
              </li>
         </ul>
    </pagination-template>
</div>

视觉上一切看起来都很好。

我的list.component代码

import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
import { Subscription } from 'rxjs';
import { Router, ActivatedRoute, Params } from "@angular/router";

import { PaginationModule } from 'ng2-bootstrap/components/pagination';


@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})

export class ListComponent implements OnInit, OnDestroy  {
  listItems = [];
  private subscription: Subscription;

@Input() id: string;
@Input() page;
@Input() maxSize: number;

@Output() pageChange: EventEmitter<number> = new EventEmitter<number>();

  constructor(private apiService:ApiService, private router:Router, private activatedRoute: ActivatedRoute)
  {

  }

  ngOnInit()
  {
     //Code removed for brevity, but here I execute WS and get data here, populated in this.listItems
     this.listItems == result;
     ...
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

我没有错误。但是当我点击更改页面时没有任何反应。

我确信它一定是简单的东西，我错过了某个地方，不管是什么，在哪里？

https://github.com/michaelbromley/ng2-pagination上的示例/代码没有帮助，我发现的任何其他示例也无济于事。

有什么想法吗？我做错了什么？

Answer 1

因此，经过多个小时，我设法解决了这个问题。

我无法使用发射器但是在我的html中我更改了它;

<pagination-template #p="paginationApi" (pageChange)="pageChange.emit($event)">

到这个

<pagination-template #p="paginationApi" (pageChange)="onPageChange($event)">

在我的代码中，我添加了这个;

  onPageChange(e)
  {
    if (e)
      this.page = e;
  }

然后我遇到了变量page未初始化的问题，所以我在构造函数中添加了这个

this.page = 1;

我不确定为什么发射器不会起作用，因为我缺乏Angular的经验然后我无法找到它，但现在这对我有效。

一个好的工作解决方案的证明是我能够将分页添加到另一个组件中，它也是第一次没有问题！

Answer 2

你可以查看物品清单吗？（例如，如果你有9个项目，itemsPerPage = 10）肯定它什么都不做:) 请验证发送到服务器的请求

ng2-pagination未触发页面更改

2 个答案: