Частичная загрузка элементов списка HTML

Question

В моем приложении Angular4 у меня есть список с несколькими тысячами элементов li. Элементы li отображаются, когда пользователь нажимает на элемент ul. Расширение такого количества возможностей li - это трудное время для браузера, иногда это занимает несколько секунд, в другой раз браузер застревает.

Я ищу умный способ как частично загрузить эти элементы. Я не хочу использовать paginantion.

<ul>
   <li *ngFor="let item of filteredData>
   <div></div> //and so on...
   </li>
</ul>

Answer 1

просто загрузить какой-либо контент

<div class="item active" *ngFor="#data of lengthArray;i=index">
    <div *ngIf="i<=4">
        content
    </div>
</div>

или проверьте это пример

<ul>
  <li *ngFor="let person of people">

      <!-- HERE: add a element with click event binding -->
      <a href="#" (click)="selectPerson(person)">
        {{person.name}} 
      </a>

  </li>
</ul>

<app-person-details [person]="selectedPerson"></app-person-details>