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

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

1 голос
/ 10 февраля 2020

Я хочу использовать ngx-virtual-scroller для разделов элементов. 

<virtual-scroller #scroll [items]="???">
    <div *ngFor="let group of groups;">    
       <div class="title">
            <span>{{group.name}}</span>
       </div>

       <my-item *ngFor="let item of group.items">
       </my-item>
     </div>
</virtual-scroller>

Что я должен добавить в элементы виртуального прокрутки ngx-virtual-scroller?

Мне нужно иметь заголовок для группы элементов .. каждый элемент принадлежит группе.

т.е. заголовок должен быть в отдельной строке, а высота элемента больше, чем высота заголовка.

Отредактировано:

Я забыл упомянуть, что число групп является динамическим c, а также количество элементов в каждой группе является динамическим c. Кроме того, количество элементов в группе может быть очень большим, поэтому я не хочу, чтобы элементы прокрутки были группами, потому что, если группа очень большая, я не хочу загружать все это в ДОМ.

1 Ответ

0 голосов
/ 11 февраля 2020

Я знаю, что ваш вопрос касается ngx-virtual-scroller, но у меня есть решение для ngx-ui-scroll , которое может пригодиться вам или кому-то, кто занимается группировкой наборов данных. Большая часть логики c кажется независимой от реализации / 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 метода. Получение групп (по индексу-количеству из-за API-интерфейса ngx-ui-scroll): 

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

...