本文通过解决使用cdkVirtualFor和ngFor在前端表格下拉列功能实现时遇到的问题，探讨了两者的差异。cdkVirtualFor在大量数据渲染时提供更好的性能，因为它按需加载内容。而ngFor在渲染大量数据时表现不佳。问题出在minBufferPx和maxBufferPx参数设置不当导致加载限制，以及compareWith函数匹配错误。理解这些细节对于提升前端性能至关重要。
需求故事：需要给表格添加一个下拉列的功能，其中这个下拉列的数据是根据后端返回数据进行加载和刷新的。
此处省略coding过程：参（chao）考（chao）相似页面功能。。。
知识点：利用 <mat-select> + <cdk-virtual-scroll-viewport> + <mat-option>组合创建一个<ng-template>。
坑1：功能实现后，发现列表有时候无法显示已加载数据，显示的是placeholder的内容，但是tooltip显示结果正常，表明这个数据已经加载并匹配成功，只是没有被这个select控件显示出来。
排查阶段发现线索：那些可以显示出来的数据是在list中比较靠前的内容。比如，如果数据在list是第10个之后，就会显示为placeholder，如果序号在10以内，则可以正常加载。
经过一顿console.log无果后，仔细研究觉得还是控件的问题，那么控件这段代码成功吸引了我的注意，特别是这个cdkVirtualFor，哎呦这个东西是什么玩意，为啥不用
最低0.47元/天 解锁文章
1689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
