Angular 2 опции динамического выбора медленно в Edge

Я использую * ngFor в версии Angular 2: 4.0.1 для заполнения 5 списков выбора на странице со следующим кодом:

select [(ngModel)]="_materialInput.code" (change)="onChange()" formControlName="code" class="form-control" id="code">
    <option *ngFor="let x of _materialValues.code" value="{{x.key}}">{{x.value}}</option>
</select>

Каждый выбор параметра вызывает обновление параметров списка выбора с сервера. Это обновление выполняется быстро в других браузерах.

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

Я использую import 'core-js/es6'; для своих полифиллов.

В дни Winforms я бы использовал BeginUpdate () EndUpdate (), чтобы такого рода вещи не происходили, но я не знаю таких вещей в веб-мире.

Кто-нибудь знает, как повысить производительность в Edge?


angular performance ngfor selectlist
person Timothy Blue    schedule 13.04.2017    source источник
comment
Просто примечание, у вас на самом деле нет вопроса в вашем сообщении: P   -  person Giora Guttsait    schedule 13.04.2017

Ответы (1)


arrow_upward
1
arrow_downward

Что ж, нет никакого способа специально узнать, почему он работает медленно в Edge, но в любом случае, для чего нужен IE!

Чтобы ускорить *ngFor, вы можете использовать функцию trackBy внутри *ngFor.

В этом примере есть что-то приятное, а именно: не отображать снова весь список, а, если что-то изменится, снова отобразить этот элемент.

<select [(ngModel)]="_materialInput.code" (change)="onChange()" formControlName="code" class="form-control" id="code">
    <option *ngFor="let x of _materialValues.code; trackBy: trackByFn" value="{{x.key}}">{{x.value}}</option>
</select>

Компонент

  trackByFn(index, item) {
    return index; // or item.id
  }

См. Подробное объяснение великого Netanel Basal:

https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5

person Mario Petrovic    schedule 13.04.2017