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中使用时,类似问题依然存在。
我在使用时出现的问题步骤如下:
- 首先选择了最后一页,这里我清除了请求的交互数据,如下图
-
其次我选择搜索功能,这里搜索后会把页面变成第一页。但是当把从后端得到的第一页数据传递给开源组件pagination后,开源组件又会出现去执行一次分页改变事件,此时组件记录了上次的保存页号,此时又会去执行查询第5页的数据(跳转至最后一页)
针对上述问题,经过排查发现是开源组件中一处问题,于是就把该开源组件单独下载了下来。
进一步的排查分析,发现是属于该开源组件中绑定数据时执行数据时的2个方法顺序不对造成的原因,如下图
其中set page(value: number) {...} 方法是页面中绑定数据对应的方法。如下图
页面变化后首先会执行ngModel对应的set page
方法,而此时页面就会进行改变(也就是搜索后跳转到第1页),但是当页面最大记录数进行改变后(上图中椭圆部分),该组件会进行执行writeValue
方法,而该组件得到值依然是最后一页(第5页),因此最后跳转到第5页,也就照成了执行2次的结果。这种结果显然不是我们想要的,因此我们需要进行修复。
修复的方法
- 不再使用该组件的ngModel进行绑定当前页号,而是自己定义了一个方法
currentPage
方法来进行代替ngModel,如下图
- 经过上述修改后发现问题得到解决,结果如下图
执行搜索后,执行一次实际请求后端接口,同时页面也跳转到第一页,而不是跳转到最后一页
总结:虽然该类问题官方可能已经在处理中了,但是在截止我使用时该问题依然存在;有相同情况的问题童鞋,可以进行参考,自己也经过这次的排查对该开源项目有了进一步的了解。