修复开源项目ngx-bootstrap中分页的一处BUG

ngx-bootstrap版本：^3.1.1
github地址：https://github.com/valor-software/ngx-bootstrap/tree/development/src

问题描述：

​ 当使用该组件中的pagination时，改变当前页号后把该数据传递给pagination组件后，pagination会执行多次调用分页改变事件。该问题在github上也存在（虽然问题已经关闭）；但是我在ngx-bootstrap版本^3.1.1中使用时，类似问题依然存在。

0.png

我在使用时出现的问题步骤如下：

• 首先选择了最后一页，这里我清除了请求的交互数据，如下图

1.png

• 其次我选择搜索功能，这里搜索后会把页面变成第一页。但是当把从后端得到的第一页数据传递给开源组件pagination后，开源组件又会出现去执行一次分页改变事件，此时组件记录了上次的保存页号，此时又会去执行查询第5页的数据（跳转至最后一页）

  
  2.png

针对上述问题，经过排查发现是开源组件中一处问题，于是就把该开源组件单独下载了下来。

3.png

进一步的排查分析，发现是属于该开源组件中绑定数据时执行数据时的2个方法顺序不对造成的原因，如下图

4.png 5.png

其中set page(value: number) {...} 方法是页面中绑定数据对应的方法。如下图

6.png

页面变化后首先会执行ngModel对应的set page方法，而此时页面就会进行改变（也就是搜索后跳转到第1页），但是当页面最大记录数进行改变后（上图中椭圆部分），该组件会进行执行writeValue方法,而该组件得到值依然是最后一页（第5页），因此最后跳转到第5页，也就照成了执行2次的结果。这种结果显然不是我们想要的，因此我们需要进行修复。

修复的方法

• 不再使用该组件的ngModel进行绑定当前页号,而是自己定义了一个方法currentPage方法来进行代替ngModel，如下图
  7.png
  8.png

• 经过上述修改后发现问题得到解决，结果如下图

9.png

执行搜索后，执行一次实际请求后端接口，同时页面也跳转到第一页，而不是跳转到最后一页

总结：虽然该类问题官方可能已经在处理中了，但是在截止我使用时该问题依然存在；有相同情况的问题童鞋，可以进行参考，自己也经过这次的排查对该开源项目有了进一步的了解。