Angular 输入超慢的离子页面

我的ionic页面有输入，速度非常慢。 4项选择的延迟约为800毫秒。当关闭键盘时，一块白色的空白块会在屏幕上停留500毫秒

这个应用程序有大约10页的表单，但是我所有的表单都很慢。请建议更好的方法来实现高性能表单

看看这个示例代码

示例代码：

<ion-content >

  <div class="confirmform" style="padding:5px;">

    <div class="confirmitem" *ngFor="let room of rooms; let i = index;">
      <ion-item class="roomheader">
        <ion-label>Room {{i+1}} Details</ion-label>

      </ion-item>
      <!-- item -->

      <div class="adultitem" *ngFor="let adult of room.adults;let x = index">
          <ion-item >
              <ion-label>Adult {{x+1}}</ion-label>

            </ion-item>
          <ion-row>

            <ion-col>
              <ion-item style="padding-top:22px;">

                <ion-select [(ngModel)]="adult.title" style="max-width: 100%;width:100%; padding-left: 2px;" interface="popover" placeholder="Title">
                  <ion-option value="Mr">Mr</ion-option>
                  <ion-option value="Ms">MS</ion-option>
                  <ion-option value="Miss">Miss</ion-option>
                  <ion-option value="Mrs">Mrs</ion-option>

                </ion-select>
              </ion-item>
            </ion-col>
            <ion-col>
              <ion-item style="padding-top: 22px;    border-bottom: 1px solid #dedede;" class="checkitem">
                <ion-label>Lead Guest</ion-label>
                <ion-checkbox color="dark" [(ngModel)]="adult.leadguest" tappable (click)="leadchecker(i,x)"></ion-checkbox>
              </ion-item>
            </ion-col>
          </ion-row>

          <ion-row>
            <ion-col>
              <ion-item>
                <ion-label floating>First Name</ion-label>
                <ion-input type="text" [(ngModel)]="adult.fname"></ion-input>
              </ion-item>
            </ion-col>
            <ion-col>
              <ion-item>
                <ion-label floating>Last Name</ion-label>
                <ion-input type="text" [(ngModel)]="adult.lname"></ion-input>
              </ion-item>
            </ion-col>
          </ion-row>

      </div>

      <!-- children -->


      <div class="adultitem" *ngFor="let child of room.children;let x = index">
        <ion-item >
            <ion-label>Children {{x+1}}</ion-label>

          </ion-item>
       <ion-row>
          <ion-col>
            <ion-item style="padding-top:22px;">

              <ion-select [(ngModel)]="child.title" style="max-width: 100%;width:100%; padding-left: 2px;" interface="popover" placeholder="Title">
                <ion-option value="Master">Master</ion-option>
                <ion-option value="Miss">Miss</ion-option>

              </ion-select>
            </ion-item>
          </ion-col>

        </ion-row>
        <ion-row>
          <ion-col>
            <ion-item>
              <ion-label floating>First Name</ion-label>
              <ion-input type="text" [(ngModel)]="child.fname"></ion-input>
            </ion-item>
          </ion-col>
          <ion-col>
            <ion-item>
              <ion-label floating>Last Name</ion-label>
              <ion-input type="text" [(ngModel)]="child.lname"></ion-input>
            </ion-item>
          </ion-col>
        </ion-row>

    </div>

      <ion-row>
          <ion-col col-9>
              <p style="color:red;font-size: 12px;">Cancellation Policy :</p>
              <p style="color:red;font-size: 12px;" *ngFor="let policy of cp[i]" [innerHTML]="policy"></p>

            </ion-col>

          <ion-col col-3>
              <h2 style="color: #484343;font-size: 16px;">Cost {{currency}} {{room.total}}</h2>
          </ion-col>
        </ion-row>
    </div>

<!-- contact section -->

<div class="confirmitem">
    <ion-item class="roomheader">
        <ion-label>Contact Info</ion-label>
      </ion-item>
    </div>

    <ion-row>

         <ion-col>
           <ion-item style="padding-top:22px;">



             <ion-label floating >Country </ion-label>
             <ion-input [(ngModel)]="contact.country.country_name" (click)="opencountry()" ></ion-input>
           </ion-item>
         </ion-col>
       </ion-row>

       <ion-row>
          <ion-col col-5>
              <ion-item>
                  <ion-label floating>Country code</ion-label>
                  <ion-input type="text" [(ngModel)]="contact.countrycode" ></ion-input>
                </ion-item>
           </ion-col>

           <ion-col>
              <ion-item >
                  <ion-label floating>Mobile Number</ion-label>
                  <ion-input type="number" [(ngModel)]="contact.homephone" ></ion-input>
                </ion-item>
           </ion-col>
       </ion-row>

       <ion-row>
          <ion-col >
              <ion-item>
                  <ion-label floating>Email Address</ion-label>
                  <ion-input type="email"  [(ngModel)]="contact.email"></ion-input>
                </ion-item>
           </ion-col>

           <ion-col>
              <ion-item >
                  <ion-label floating>Confirm Email</ion-label>
                  <ion-input type="email"  [(ngModel)]="contact.email2" ></ion-input>
                </ion-item>
           </ion-col>
       </ion-row>

       <ion-row>
         <ion-col>
           <button ion-button color="primary" style="margin:0 auto;display:block" (click)="submitBooking()">Proceed to Booking</button>
         </ion-col>
       </ion-row>

  </div>
</ion-content>

房间{{i+1}详细信息
成人{x+1}
先生
太太
错过
夫人
主宾
名字
姓
儿童{x+1}
主人
错过
名字
姓
取消策略：


成本{{currency}{{room.total}
联系方式
国家
国家代码
手机号码
电子邮件地址
确认电子邮件
进行预订

---

请向我推荐一种提高页面性能的方法。

您可以通过以下建议来提高页面性能：

删除所有

内联样式

并将其放入相关页面的

SCSS

文件或使用全局

app.SCSS

文件<代码>内联样式不会缓存，也很难维护应用程序

使用以下

CLIs

，在真实设备上测试应用程序的性能：

ionic cordova build android --prod

ionic cordova build ios --prod

---

我也在production env上进行了测试，但是输入性能很差。您是否执行了

1建议

？我现在将尝试并让您知道。谢谢你找到合适的解决办法了吗？我并没有内联样式，在生产模式为angular的设备上进行测试，而prod似乎并没有帮助