угловая: асинхронно заполнить массив - PullRequest
Новая
       13

угловая: асинхронно заполнить массив

0 голосов
/ 17 октября 2019

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

Исходный список синхронно доступен в переменной (он не дается изасинхронный вызов к серверу).

Я думаю, что я должен создать зеркальный массив, начиная с пустого, и написать асинхронную функцию для перемещения элементов из исходного списка в зеркальный.

Какой способ сделать что-то подобное? Я не могу понять, как использовать для этого наблюдаемые.

Это моя упрощенная установка

Компонент 

source = [...]; // a thousand of objects
mirror = [];    // progressively filled with source elements

async onDropdownOpen(open: boolean) {
  if (open) {
    // async fill of mirror
  } else {
    // empty mirror to boost next time dropdown opening
    mirror = [];
  }
}

Шаблон (я использую ngBootstrap) 

<div
  ngbDropdown
  #dd="ngbDropdown"
  (openChange)="onDropdownOpen($event)">
  <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
    <div *ngFor="let el of mirror">
      ... async el rendering ...
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 17 октября 2019

Похоже, вы можете использовать директиву Angular CDK Virtual Scroll. 

  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
    <div *cdkVirtualFor="let el of mirror">
      ... async el rendering ...
    </div>
  </div>

https://material.angular.io/cdk/scrolling/overview

...