在离子选择中添加一个大列表会使app慢

时间:2017-02-27 09:04:54

标签: angular ionic2

我的离子选项中有大量列表,这使得我的视图非常慢,如果我在离子选项中添加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个国家,我应该怎么做才能加载一切

2 个答案:

答案 0 :(得分:1)

根据我在互联网上搜索的内容,我发现这个问题没有真正,直截了当的答案。

然而 daveshirman ionic's github issue section给出了一个很好的建议:

  

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

答案 1 :(得分:-3)

试试吧

  <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"
              }

            ];