Angular 如何提高选择框的性能？

我试图在

离子选择中显示一长串国家列表。目前我正在尝试加载249个国家。渲染，性能在我的手机上非常慢

<ion-list margin-top margin-bottom>
    <ion-item>
      <ion-label margin-left style="color:#3498db">Country</ion-label>
      <ion-select margin-right [(ngModel)]="country" okText="Done" placeholder="Select">
        <ion-option *ngFor="let item of countries" [value]="item.ccode" [selected]="country == item.ccode">{{item.cname}}</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>


国家
{{item.cname}

有什么方法可以提高渲染性能吗？
最好的方法是使用
模式。您还可以在顶部添加一个搜索栏，以便用户可以轻松找到目标国家。下面只是一个简化的演示（如果您发现任何错误，请告诉我，因为我已经从中删除了很多不相关的代码）

请注意，我在视图中使用常规的
div
，而不是为每个国家使用
离子列表和一个
离子项目。这是因为国家列表很大（~250），并且使用的
离子列表和
离子项目是来自离子的组件（基于角度）将需要初始化这些组件，渲染它们，然后在每次筛选国家/地区时创建/销毁它们在演示中，由于它们只是html元素（带有一些简单的样式规则），即使在非常旧的移动设备中，性能也非常好。

控制器

// Angular
import { Component } from '@angular/core';

// Ionic
import { NavParams, ViewController } from 'ionic-angular'; 

@Component({ 
    selector: 'page-country-list', 
    templateUrl: 'country-list.html' 
    })
export class CountryListPage {

    public countries: Array<any>;
    public countriesToShow: Array<any>;

    constructor(private paramsCtrl: NavParams, private viewCtrl: ViewController) {
        // Get the data as a parameter
        this.countries = paramsCtrl.get('countries');

        // Initialize the list of countries to show in the view
        this.initializeCountriesToShow();
    }

    public initializeCountriesToShow(): void {
        // Clone the list of countries so we don't modify the original copy
        this.countriesToShow = [...this.countries];
    }

    public filterCountries(ev: any): void {
        // Reset countries back to all of the countries
        this.initializeCountriesToShow();

        // Set val to the value of the searchbar
        let val = ev.target.value;

        // If the value is an empty string don't filter the countries
        if (val && val.trim() != '') {
            this.countriesToShow = this.countriesToShow.filter((country) => {
                return (country.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
            })
        }
    }

    // Method that returns the selected country to the caller
    public selectCountry(country: any): void {
        this.viewCtrl.dismiss(country);
    }

    // Method that closes the modal without returning anything
    public close(): void {
        this.viewCtrl.dismiss();
    }
}

呼叫方组件

然后，为了显示模态，可以执行以下操作：

constructor(private modalController: ModalController) {}

// ...

public showCountryDropdown(): void {

    // Create the modal
    let modal = this.modalCtrl.create('CountryListPage');

    // Handle the result
    modal.onDidDismiss(country => {
        if (country) {
            // Handle the selected country
            // ...
        }
    });

    // Show the modal
    modal.present();
}

注意：在演示中，我假设每个
国家
项都有一个属性
名称
 您从何处获得
249
记录？@Sampath来自我的服务器如果下面的解决方案有效，则没有问题。但您也可以选择缓存解决方案。例如。您可以在设备上存储这些国家/地区。
.ios, .md {
    page-country-list {

        div.country-item {
            position: relative;
            margin-right: 16px;
            margin-left: 16px;
            margin-top: 16px;
            padding-bottom: 16px;
            border-bottom: 0.55px solid map-get($colors, light);

            &:last-child {
                border-bottom: none;
            }
        }

        ion-navbar {
            .close-icon {
                font-size: 3.5rem;
                padding-right: 8px;
            }
        }

    }
}

constructor(private modalController: ModalController) {}

// ...

public showCountryDropdown(): void {

    // Create the modal
    let modal = this.modalCtrl.create('CountryListPage');

    // Handle the result
    modal.onDidDismiss(country => {
        if (country) {
            // Handle the selected country
            // ...
        }
    });

    // Show the modal
    modal.present();
}