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

Question

Сценарий:

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

быстрое исправление было в

• установить высоту для cdk-virtual-scroll-viewport равной 500px или установить высоту для класса '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