时间戳

首页 > 解决方案 > 在 Angular 中选择选项视图滞后

angular - 在 Angular 中选择选项视图滞后

问题描述

我正在尝试制作一个带有国旗图像和国家名称的国家选择下拉菜单。

<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 文件）。我该如何解决这个滞后？

是否有可能仅显示可见选项的标志？

标签： angularuser-interfaceangular-material

解决方案

尝试使用 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-does-angular-2-change-detection-really-work/

推荐阅读