Как прокрутить два списка одновременно с помощью виртуальной прокрутки angular cdk?

Я бы хотел сделать что-то вроде этого:

<cdk-virtual-scroll-viewport [itemSize]="25">
  <svg>
    <g *cdkVirtualFor="let item of items">...</g>
  </svg>
  <div *cdkVirtualFor="let item of items">...</div>
</cdk-virtual-scroll-viewport>

И пусть оба элемента g и div прокручиваются одновременно (они оба имеют одинаковую высоту). Это возможно? Выполнение именно того, что я здесь описал, приведет к ошибке: Error: CdkVirtualScrollViewport is already attached.


angular angular-cdk angular-cdk-virtual-scroll
person Mike Jerred    schedule 02.08.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вот как мне удалось создать 2 списка с помощью virtual-scroll: я объединил списки, добавил тип, отсортировал ваш список по типу и сделал перерыв при изменении типа:

ts file:
    didGroupChange(jobNow:JobsResponse, jobPrev:JobsResponse){
            return jobNow.type!==jobPrev?.type;
        }
HTML:
    <cdk-virtual-scroll-viewport [itemSize]="20" class="scroll-panel-jobs">                         
    <dl>
        <ng-container *cdkVirtualFor="let job of  country?.jobsList;  let index = index;">
             <dt *ngIf="didGroupChange(job,country?.jobsList[index-1])" class="line row h15 title-job">{{job.type}}</dt>    
             <dd class="line row h16">{{job.title}} </dd>                     
        </ng-container>
      </dl>                 
</cdk-virtual-scroll-viewport>
person katesky8    schedule 27.10.2020