将一个大列表添加到Ion Select中，使应用程序慢

Question

我在离子选项中有大量列表，这会使我的视图非常慢，如果我在离子中添加4个项目，我的手机中的视图很快，但是当我在我的html文件中添加了大量列表，应用程序减慢了，

<ion-item>
                <ion-label style="color: black;" >Country</ion-label>
                <ion-select name="Country" placeholder="select a Country" [(ngModel)]="Country" required>
                    <ion-option value="United States">United States</ion-option>
                    <ion-option value="Afghanistan">Afghanistan</ion-option>
                    <ion-option value="Albania">Albania</ion-option>
                    <ion-option value="Algeria">Algeria</ion-option>
                .
                ./* list of all countries are needed */
                .                    
                </ion-select>
            </ion-item>

是否有可能加载所有国家并使该应用程序快速工作。总的来说，我们在世界上有196个国家，我该怎么办才能加载一切

Answer 1

从我在互联网上搜索的内容中，我发现对此问题没有真实，直接的答案。

但是， daveshirman 就Ionic的GitHub问题提供了一个很好的建议：

为什么不通过搜索将选择更改为模式窗口弹出窗口 字段在虚拟列表组件中具有列表。添加搜索 字段和管道过滤器也。

Answer 2

尝试

  <ion-label>Country</ion-label>
      <ion-select [(ngModel)]="Country" placeholder="select a Country">
        <ion-option value={{item.val}} *ngFor="let item of options">{{item.name}}</ion-option>
      </ion-select>

.ts

    public val;
    public options =  [
              {
                "name": "United States",
                "val" : "United States"
              },
              {
                "name": "Afghanistan",
                "val" : "Afghanistan"
              },
              {
                "name": "Albania",
                "val" : "Albania"
              },
              {
                "name": "Algeria",
                "val" : "Algeria"
              }
            ];