Как обнаружить видимые элементы внутри div контейнера углового 2

Question

Я пытаюсь получить видимые элементы в прокручиваемом div (после init или scroll).
Мои элементы данных имеют разную высоту.

Каркас угловой 8.

html example:
<div id="container" style="height: 300px; overflow-y: scroll">
    <div *ngFor="let hero of heroes">
        {{ hero.name }}
    </div>
</div>

getVisibleElements(elements) {
  // in this function I want to get the elements that the user sees in container
}

Answer 1

Короткий ответ - использовать ViewChildren декоратор , затем перебрать дочерние элементы и получить их рост, используя nativeElement .

Не проверено, но, вероятно, так.Сначала добавьте что-то в div, над которым вы зацикливаетесь:

<div id="container" style="height: 300px; overflow-y: scroll">
    <div *ngFor="let hero of heroes" #hero>
        {{ hero.name }}
    </div>
</div>

Затем получите список запросов в вашем наборе машинного кода:

@ViewChild('hero')
heros: QueryList<ElementRef>;

Затем просто зациклите QueryList:

getVisibleElements(elements) {
  let totalHeight = 0;
  heros.forEach(hero => {
    totalHeight += hero.nativeElement.offsetHeight;
  });
  console.log('total height' + totalHeight);
}