[Bug Note] antd ngzorro nzSelect 的坑

[PeterChen1997]

背景

最开始接到系统用户反馈，下拉搜索结果里的候选结果找不到某个课程（比如只查询到 1 2 3 期课程中的一部分课程，剩下的没了），但是他的同事可以，于是展开了一系列的 bug 排查，过程还是比较有意思，所以记录下

分析过程

首先最快的就是 联系反馈的用户，直接看看问题的复现场景，在等待用户回复的过程中，也同步从代码测做一下排查

是 从链路上进行分析，因为初步看了下前端代码，应该没有问题，所以从后往前看看

定位了下问题出现的时间点，发现是在 七八月 开始陆续有类似反馈出现

后端

后端这块可能出现问题的原因应该是接口查询返回值异常，导致前端无法展示剩余课程，所以这边了解了下后端的改动情况，配合测试了下 接口的稳定性，发现没有特别大的问题

其次可能是网络传输中出现了问题

网络请求

排查过程中和同事联系到了反馈的用户，通过屏幕共享复现了这个问题，并且发现 console 内并没有 HTTP 请求报错，并且发现本来应该在滑动到下拉框底部发送的后端请求也没有发送，所以问题应该是出现在前端了

前端

前端确认了下组件的构成，定位了下代码，发现是使用了 antd ngzorro 的 nzSelect 组件，配合 nzScrollToBottom API 进行远端请求

和组内同事在 mac 系统下一起测试过都没法复现，所以感觉可能是一个 windows 系统下的偶现问题，结合用户反馈来说也说得通，但是这个问题就不好解决了，所以打算再继续排查下

首先看了下 antd 的 issues，发现之前没有出现过这类 API 调用异常的问题，所以只能去看看源码

一层层找到对应 API 的调用地方，发现最终是在这个地方判断是否调用的

• select component: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/select/select.component.ts#L122
• select option: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/select/option-container.component.ts#L35
• scrollToBottom => onScrolledIndexChange: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/select/option-container.component.ts#L111

然后了解了下 cdk-virtual-scroll-viewport 是通过传入的 itemSize 进行 onScrolledIndexChange 的调用判断的，所以应该是 itemSize 出了问题

其实这个时候 意外发现，浏览器缩放不为 100% 情况下，下拉到底部是触发不了 scrollToBottom 的，刚好印证了上面的问题

没想到竟然是组件库的问题

解决方案

业务

定位到是组件库的问题，所以我们作为下游只能先临时用方案 避开这个场景，一开始想的是直接通过 js 调整缩放比例，让功能正常就行，结果发现并没有相应 API 来做这个事..

退而求其次的话，那就加一个缩放异常提示的 toast，如果缩放不对的话，就让用户自动操作就行，并且确实也是这么解决上线了

但是万万没想到，判页面是否缩放的 window.devicePixelRatio 并不好使，受显示器的影响很大，并不能通过简单取整判断是否缩放，所以这个时候只能在前端加一个「加载更多」的按钮，类似让用户手动触发 nzScrollToBottom

目前功能已经上线，还没有接到后续反馈

组件库

也给组件库提了对应的 issues 和 pr，但是感觉维护者最近比较忙，一直都没有下文

详情可以看这个issues，具体的解决方案已经记录的比较全了

后面根据方案二，提交了一个PR，

感悟

组件库也可能是有坑的，并且你有可能是踩到的第一个人..