angular - 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 的经验，所以我无法找到这一点，但现在这对我有用。

良好工作解决方案的证明是，我能够将分页添加到另一个组件中，并且它第一次就可以正常工作，没有任何问题!