Использование ngx-virtual-scroller с разделами элементов

Я знаю, что ваш вопрос касается 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