修复开源项目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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,236评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,867评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,715评论 0 340
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,899评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,895评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,733评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,085评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,722评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,025评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,447评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,057评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2 343

推荐阅读更多精彩内容

  • 关于Mongodb的全面总结 MongoDB的内部构造《MongoDB The Definitive Guide》...
    中v中阅读 31,898评论 2 89
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,019评论 4 62
  • 今天,我们去春游。我们兴高采烈的出发了! 到了学校,我的心“扑通、扑通”地跳着。该上车了,我们一个个兴奋地...
    王威哲阅读 200评论 0 0
  • Alice是一个欢快的如同小鸟的女孩儿,走起路来一飘一飘,很久才落地,唱起歌来莺莺动人,好勾人魂儿。爱丽丝也是个很...
    鱼安YUAN阅读 516评论 1 7
  • 增持。股东用自有资金/自筹资金进行股份增持,即加仓。10送3股:公司盈利了,给股东的分红回报,分红有两种形式,是股...
    zyystar阅读 140评论 0 0