Виртуальная прокрутка на Angular 7 - высота по умолчанию равна нулю

Question

Сценарий:

• Попробовал базовый тест виртуальной прокрутки, читая этот пост
• в массиве было много элементов
• ошибки не было
• список загружен в виртуальный свиток, но его высота по умолчанию равна 0

быстрое решение было

• установите высоту для cdk-virtual-scroll-viewport равной 500 пикселей или установите высоту для класса example-viewport в app.component.css

Вопрос: как правильно преодолеть эту нулевую высоту?

образец на https://stackblitz.com/edit/angular-efdcyc

Answer 1

• используйте min-height 100% для области просмотра и проверьте
• убедитесь, что высота, заданная в области просмотра с помощью itemSize, соответствует высоте элемента в CSS

• если вы используете Observable, обязательно разрешите его с помощью * ngIf и асинхронного канала. Важно: элемент html является контейнером ng, потому что он может не отображаться для минимальной ширины!

    .list {
       min-height: 100%;
    }
  
    .item {
       height: 100px;
    }
  

При использовании Observable в качестве источника

<ng-container *ngIf="obs$ | async; let data">
  <cdk-virtual-scroll-viewport itemSize="100" class="list">

Answer 2

Добавьте необходимые стили CSS, чтобы обеспечить высоту элемента

.example-viewport {
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.example-item {
  height: 50px;
}

Вы можете увидеть полное содержание примера, который вы упомянули здесь. https://material.angular.io/cdk/scrolling/overview

Они также использовали собственный CSS для стилизации своих элементов.

Обновлен Slackblitz

Answer 3

Этот CSS работает для меня (фиксированная высота не требуется):

<cdk-virtual-scroll-viewport class="viewport">  
   .......
</cdk-virtual-scroll-viewport>

.viewport { 
   display: contents;
}

Answer 4

Из этих ответов мне нравится один сdisplay: contents;больше всего потому, что у него нет % или px.

Это также сработало для меня:

      cdk-virtual-scroll-viewport { 
    contain: none;
}