我知道您的问题是关于 ngx-virtual-scroller,但我有一个ngx-ui-scroll的解决方案,这可能对您或处理数据集分组的人有所帮助。大部分逻辑似乎独立于滚动器实现/api,但让我认为我正在为 ngx-ui-scroll 做这件事。
在这种情况下,我们需要将其groups
视为应get
根据 ngx-ui-scroll 文档实现方法的数据源。喜欢以下
groups = new Datasource({
get: (index, count, success) =>
success(this.getItems(index, count)
)
})
我不知道您的数据结构,这应该不重要,因为我们正在讨论这种方法。我们唯一需要考虑的是数据源和模板之间的一致性。想象一下,我们已经有固定长度的平面项目数据集
data = [];
MIN = 1;
MAX = 200;
constructor() {
for (let i = this.MIN; i <= this.MAX; i++) {
this.data.push({ id: i, text: 'item #' + i });
}
}
你想把它们分组。你会有多少组?这取决于您希望在一个组中包含多少个项目。
this.ITEMS_PER_GROUP = 3;
this.groupsCount = Math.ceil((this.MAX - this.MIN) / this.ITEMS_PER_GROUP);
然后回到getItems
实现,我建议将项目检索过程拆分为 2 个方法。获取组(通过索引计数由于 ngx-ui-scroll api):
getItems(index: number, count: number) {
const data = [];
const start = Math.max(1, index);
const end = Math.min(this.groupsCount, index + count - 1);
if (start <= end) {
for (let i = start; i <= end; i++) {
const group = this.getGroup(i);
if (group) {
data.push(group);
}
}
}
return data;
}
并按索引获取一组:
getGroup(index: number) {
let result = null;
const data = [];
const start = this.MIN + (index - 1) * this.ITEMS_PER_GROUP;
const end = start + this.ITEMS_PER_GROUP - 1;
if (start <= end) {
for (let i = start; i <= end; i++) {
const item = this.data.find(item => item.id === i);
if (item) {
data.push(item);
}
}
result = {
title: 'Group ' + index,
items: data
};
}
return result;
}
这样,您将获得与模板层所需的数据源一致的数据源。使用 ngx-ui-scroll 它将如下所示:
<div *uiScroll="let group of groups">
<div>{{group.title}}</div>
<div *ngFor="let item of group.items">
<div class="item">{{item.text}}</div>
</div>
</div>
说到 ngx-ui-scroll,所有限制都可以消除,我的意思是你可能不知道数据集和组数的边界,但实现会略有不同。
最后,我创建了演示,因为该案例似乎对 ngx-ui-scroll 用户有用
https://stackblitz.com/edit/angular-ngx-ui-scroll-1-3-4-grouping-datasource