Как применить виртуальную прокрутку к списку (Angular4)? - PullRequest
Новая
       25

Как применить виртуальную прокрутку к списку (Angular4)?

0 голосов
/ 07 марта 2019

Я пытаюсь сделать блок, содержащий список элементов. Этот блок имеет максимальную высоту, если элементы превышают максимальную высоту, запускается прокрутка. Прокрутка должна применяться только к элементам списка. У меня проблема с использованием свитка от Angular4. 

import {List} from '../../../../../models/list';
import {VirtualScrollerComponent} from 'ngx-virtual-scroller';
import {PerfectScrollbarDirective} from 'angular2-perfect-scrollbar';


export class RoutesObjectComponent implements OnInit {
  listItems;
  @Input() listItems: List[];
  @ViewChild(VirtualScrollerComponent)
  public vscroll: VirtualScrollerComponent;
  @ViewChild('scroll', {read: PerfectScrollbarDirective})
  private pscroll: PerfectScrollbarDirective;
}
.element-list {
  max-height: 500px
}
<md-list class="element-list">
  <md-list-item class="element-list__header"></md-list-item>
  <md-divider></md-divider>
   <virtual-scroller #scroll perfect-scrollbar
                      class="element-list__conteiner"
                      fxLayout="column"
                      [items]="elements"
                      [enableUnequalChildrenSizes]="true">
        <md-list-item md-line
                    class="elements-item"
                    *ngFor="let elements of scroll.listItems">
                    ...
       </md-list-item>
   </virtual-scroller>
</md-list>
...