Выберите опцию просмотра лагов в Angular

Question

Я пытаюсь выбрать страну из выпадающего списка с изображениями флагов и названием страны.

<mat-select placeholder="Country" ngModel name="nationality [(ngModel)]="nationality">
  <mat-option *ngFor="let country of Countries" [value]="country.code" >
      <div>
        <img [src]="country.flag" [alt]="country.name">
        <p>{{ country.name }}</p>
      </div>
  </mat-option>
</mat-select>

Теперь, если я перечислю все страны мира, интерфейс станет слишком медленным. Это определенно связано с 200+ флагами (определенно файлы SVG). Как мне решить эту задержку?

Можно ли как-нибудь показать флаги только для видимых опций?

Answer 1

На данный момент Виртуальная прокрутка подходит лучше всего в вашем случае.

На самом деле, на git постоянно обсуждается virtual-scroll внутри mat-select новые значения не видны и большое пространство . Из того же обсуждения я нашел пример на stackbltiz , который может вам помочь.

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

Answer 2

Попробуйте использовать onPush ChangeDetectionStrategy, который улучшит производительность ваших приложений, гарантируя, что обнаружение изменений angular происходит только при срабатывании указанного действия.

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
@Component({
    selector: 'app-country',
    changeDetection: ChangeDetectionStrategy.OnPush,
    templateUrl: 'country.html'
});

export class CountryComponent {}

Подробнее о: https://blog.angular -university.io / how-делает-angular-2-обнаружение изменений действительно работает /