AngularJS 2 分页返回 NaN onClick答案

【问题标题】：AngularJS 2 Pagination Returns NaN onClickAngularJS 2 分页返回 NaN onClick
【发布时间】：2017-05-13 05:30:12
【问题描述】：

我在这里遵循这个例子：

https://github.com/Urigo/meteor-angular2.0-socially/blob/master/manuals/views/step13.md

Step 13.11: 添加pageChange事件绑定

和 pageChange，什么都没有发生。使用控制台调试页码返回为NaN。如果我硬编码页码没有问题，即我可以分页。 $event 被传递为 NaN（我猜是 null 或 undefined）。

编辑

我正在使用的代码。

ng:

<pagination-controls (pageChange)="onPageChanged($event)"></pagination-controls>

https://github.com/jessejamesrichard/shortshape/blob/master/client/imports/app/parties/parties-list.component.html (17)

调用：

onPageChanged(page: number): void {
  console.log(page);
  this.curPage.next(page);
}

https://github.com/jessejamesrichard/shortshape/blob/master/client/imports/app/parties/parties-list.component.ts (99)

我认为问题与onPageChanged($event) 无关。 $event 是错误的，或者排版是一个问题，或者我完全搞砸了其他东西。或组合。

【问题讨论】：

请分享您的代码 plnkr 或 github 链接。否则我们无法解决您的问题
为清晰起见进行了编辑。

标签： angularjs angular meteor

【解决方案1】：

我遇到了同样的问题，最终发现问题是我缺少<tr> 标签上的id 属性。在我的 html 页面中有多个带有分页的表格，我必须为<pagination-controls> 标签提供id，但我也错过了将它放在<tr> 上。

这是我得到的：

在我的 html 中：

 <table>
<tbody>
    <tr *ngFor="let request of requests | 
      paginate: { itemsPerPage: 10, currentPage: p2, id: 'history' };
          let i = index">
          <!--put your <td> tags here...-->
    </tr>
</tbody>
</table>
<pagination-controls previousLabel="pre" 
nextLabel="next" (pageChange)="p2 = $event" maxSize="9" directionLinks="true" id="history"></pagination-controls>

【讨论】：