ng2-pagination 不触发页面更改

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）肯定它不会做任何事情:) 请验证发送到服务器的请求