需求故事:需要给表格添加一个下拉列的功能,其中这个下拉列的数据是根据后端返回数据进行加载和刷新的。
此处省略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,哎呦这个东西是什么玩意,为啥不用