ng2-pagination not firing page change

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

这里是我的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上的示例/代码没有帮助，我找到的任何其他示例也无济于事。

任何想法？我做错了什么？

来源

2016-11-17 jason.kaisersmith

嗨。我是lib作者。问题：在PaginatePipe中设置'currentPage：page' - 我的代码中没有看到“page”var。它是否作为输入传入？目前，您的代码似乎只是重新发出pageChange事件，但我看不到任何会改变“page”值的任何部分 - 为了使分页正常工作，必须进行这一操作。 –

嗨迈克尔，是的，我在我的课上，但错过了上面的代码（复制过去的问题）。但是这指出了我正确的方向，并且我已经解决了这个问题。看到我下面发布的答案 –

所以请求。

我无法得到它与发射器的工作，但在我的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的经验，我无法找到这个，但现在这对我有用。

而一个好的工作解决方案的证明是，我能够将分页添加到另一个组件中，并且它也可以在没有问题的情况下第一次运行！

来源

2016-11-18 10:14:52

你可以检查物品清单吗？（例如，如果u有9个项目和itemsPerPage = 10），它肯定会做什么:) 请核实更多的时间我已成功地解决这一问题后，向服务器发送

来源

2016-11-17 09:47:58

不，这不是问题。我在不同的列表上尝试过使用不同数量的项目，并且为了测试，我已将每页的项目数量限制为3.尽管拥有超过20个项目，但我遇到了这个问题。根据我拥有的物品数量，分页中显示的页数是正确的（并且对于每个清单都是正确的） –

我正在使用相同的库，它工作正常。但是我使用http与服务器通信。请求包含（itemsPerPage和currentPage），并且响应包含（服务器中的totalItems和链接到此页面的项目），在您的情况下，项目是静态的，因此每个请求只需要第一个项目。 –

我不确定分页是否与静态项目列表一致（因为背后的想法是获取分段中的完整列表） –

ng2-pagination not firing page change

回答

相关问题