Angularjs Выберите опцию Улучшение производительности - Gropup By Filter для 3000+ данных - PullRequest
Новая
       27

Angularjs Выберите опцию Улучшение производительности - Gropup By Filter для 3000+ данных

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

У меня есть выпадающий список, который фильтрует данные, соответствующие выбранной опции. Если ничего не выбрано, то отображается более 3000 записей, которые замораживают мой пользовательский интерфейс на несколько секунд. Но для другого варианта переключения, который имеет несколько сотен данных, идеально и быстро. Есть ли способ повысить производительность здесь?

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

Select City:<span class="float-right fa fa-window-close mb-2"
                  ng-click="sm.selectedCity=undefined;">
            </span>
<select ng-model="sm.selectedCity" >
    <option value="" selected hidden />
    <option ng-repeat="s in sm.citylist"
            ng-selected="sm.selectedCity" ng-value="">
      {{s.value}}
    </option>
</select>

Следующие данные пользовательского интерфейса зависят от выбранного выше варианта города,Первоначально не выбрана ни одна опция, которая выбирает более 3000 данных для одного из сгруппированных объектов Country.

Чтобы кратко объяснить ниже UI ... sampledata - сложный объект, заполненный с сервера. sampledata содержит свойство Country, которое сгруппировано, и его можно свернуть или развернуть, щелкнув плюс / минус в правой части. В зависимости от выбранного фильтра города сгруппированная страна изменится. Работает нормально для меньшего количества данных. Но если в одной из стран больше данных, таких как (3000+), мой пользовательский интерфейс зависает при очистке фильтра 

<div ng-repeat="(key, value) in sm.sampledata | filter:{STFilter:sm.selectedCity} | filter:{someother } | filter:search.number  | orderBy:'Country' | groupBy: 'Country' track by $index">
      <div class="mb-5">
          {{ key }} ({{ value.length }})<span ng-class="sm.toggle[$index] === true ? 'fa fa-minus' : 'fa fa-plus'" ng-click="sm.toggle[$index] = !sm.toggle[$index]" class="pull-right"></span>
      </div>

      <div ng-show="sm.toggle[$index]">
          <div ng-repeat="o in value">
              //o is a complex object in which one of the object needs to be filtered based on selected option from dropdown
              <div>
                  {{o.sample1}}<span class="pull-right">{{o.sample2}}</span>
              </div>
              //Still more will come
          </div>
      </div>
      <hr />
</div>

Примечание. Я использую угловую версию 1.7.2

1 Ответ

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

Для повышения производительности используйте директиву ng-options .

Из документов:

Выбор между ngRepeat и ngOptions

Во многих случаях ngRepeat может использоваться на элементах <option> вместо ngOptions для достижения аналогичного результата. Тем не менее, ngOptions предоставляет некоторые преимущества:

  • больше гибкости в том, как модель <select> назначается с помощью выбора как часть выражения понимания
  • уменьшенопотребление памяти за счет отсутствия создания новой области для каждого повторного экземпляра
  • увеличенная скорость визуализации за счет создания параметров в фрагменте документа вместо отдельных

Специально, выберите с помощью повторные параметры значительно замедляются, начиная с 2000 параметров в Chrome и Internet Explorer / Edge.

Для получения дополнительной информации см. 

Select City:<span class="float-right fa fa-window-close mb-2"
                  ng-click="sm.selectedCity=null">
            </span>
<select ng-model="sm.selectedCity" 
        ng-options="s.value as s.value for s in sm.selectedCity">
</select>
...