Динамическое вычисление высоты дочернего компонента

Я разрабатываю приложение "Угловое", и мне приходится сталкиваться с некоторыми проблемами.

Я в ситуации, когда мне приходится загружать несколько дочерних компонентов внутри родительского компонента-контейнера. Детский компонент загружается один под другим. Я хочу загрузить "n" количество компонентов до тех пор, пока прокрутка не станет видимой, чтобы я мог обрабатывать ленивую загрузку дочерних компонентов. На данный момент я пытаюсь использовать следующее условие.

while (window.screen.height > 
   this.elementRef.nativeElement.getBoundingClientRect().height) 
   {
      this.child= this.childSet.slice(0, this.count+1);
   }

и html-код выглядит следующим образом

<child*ngFor="let child of childSet" [value]="child " [column-size]="child .size ? child .size : 12"></child>

но это происходит в бесконечном цикле, и я не знаю, почему, но я думаю, что представление не отображается так быстро, как цикл while. Итак, как решить эту проблему. Пожалуйста, помогите.

ОТВЕТЫ

Ответ 1

Я создал демоверсию, которая обеспечивает решение вашей проблемы. Здесь: https://stackblitz.com/edit/angular-9hd2no.
Вместо того, чтобы использовать петлю, я положил свою логику внутри interval, который будет повторяться до stopCondition это true. Я также добавил несколько классов в styles.css и app.component.css чтобы высота родительского компонента увеличивалась по мере увеличения числа дочерних компонентов. Надеюсь это поможет.

Ответ 2

Возможно, попробуйте использовать trackBy для вас. Таким образом, он не *ngFor все элементы, а вместо этого добавит новый, когда вы измените коллекцию. Это может быть решение вашего бесконечного цикла.

Я бы попробовал что-то вроде этого

  trackByFn(index, item) {
    return index;
  }

и html

<child *ngFor="let child of childSet; trackBy: trackByFn" [value]="child " [column-size]="child .size ? child .size : 12"></child>

Ответ 3

GetBoundingClientRect возвращает идеальное значение только после завершения рендеринга. Поэтому вы должны отображать один элемент за раз и добавлять элемент только в том случае, если свиток не отображается.