ng-alain 表格海量数据虚拟滚动

背景说明：在表格里增加车辆的历史轨迹，数据通常很多，多是上千条以上。如果不使用虚拟加载，表格会异常卡顿。

1. 先上代码

<st #st class="history"
                  [data]="deviceHistoryData" [columns]="deviceHistoryCol" 
                  [page]="{show: false, front: false}" [rowClassName]="setHistoryRowClass"
                  (change)="historyChange($event)" [scroll]="{ y: '205px', x: '240px' }"
                  [widthMode]="{ type: 'strict', strictBehavior: 'wrap' }" virtualScroll [virtualItemSize]="32"
                  [virtualMaxBufferPx]="205">

2. 虚拟滚动设定的时候，需要同时指定 virtualItemSize virtualMaxBufferPx。并且 virtualMaxBufferPx的大小要与 scroll 设定的 y 一样。不然表格会出现空白行情况。

3. virtualMaxBufferPx 的意思是一次渲染的最高像素。如果比 y 值小，就会出现上一步说的问题。

对 ng-alain 文档的吐槽：

文档是做了虚拟滚动的示例。那是完全在合法高度的情况，采用默认设置就可以完美展示的。实际上关于虚拟滚动的设定，应该是搭配使用。并且对虚拟属性的解释，不明不白。还不如找到 cdk scrolling 直接用机器翻译给的解释好用。