我们有一个离子角应用程序，基本上是一个联系人管理应用程序。随着应用程序中联系人的增加，应用程序变得非常慢。点击，滚动一切都变得很慢。
该应用程序使用离线存储并将数据填充到一个数组中，该数组用于呈现卡片列表。因此，网络不是问题。
我有大约1200个联系人发生这个问题。请告诉我如何调试问题。
列表页面的代码如下所示：

<ng-container *ngIf="core.syncedCards != undefined && core.syncedCards.length > 0">
          <ng-container *ngFor="let card of core.syncedCards">
            <app-contact-card [card]="card"></app-contact-card>
          </ng-container>  
        </ng-container>

组件代码为：

<ion-card>
    <ion-item lines="none">
      <ion-label (click)="viewCard(card)">{{card.firstName}} {{card.lastName}}</ion-label>
      
      <ion-button fill="clear" slot="end" (click)="toggleFavorite(card)">
        <ion-icon slot="icon-only"   color="warning" name="star"></ion-icon>
      </ion-button>
    </ion-item>
    <ion-card-subtitle>{{getJobDept()}}</ion-card-subtitle>
    <ion-card-content>
      <ion-item (click)="viewCard(card)">
          <ion-thumbnail slot="start" class="profile-pic">
            <img src="assets/images/noPerson.jpg">
          </ion-thumbnail>
          <ion-label class="ion-text-wrap">
             <ion-row><ion-col  class="ion-no-padding">{{card.company}}</ion-col></ion-row>
             <ion-row><ion-col  class="ion-no-padding">{{card.city}}, {{card.state}}</ion-col></ion-row>
             
             <ion-row *ngIf="card.tags !== undefined && card.tags.length > 0">
               <ion-col size="auto" *ngFor="let tag of card.tags">
                  <ion-chip [color]="core.getTagColor(tag)">
                    {{tag}}
                  </ion-chip>
               </ion-col>
             </ion-row>
          </ion-label>
        </ion-item>
        <ion-row class="ion-padding" style="padding-bottom:0px" *ngIf="refreshActions() === true"> 
          <ng-container *ngFor="let action of cardActions;let i = index">
            <ion-col size="2" *ngIf="i < 3">
              <ion-icon [name]="getLogoName(action.type)" [color]="getLogoColor(action.type)" size="large" (click)="doCardAction(action.type, card)"></ion-icon>
            </ion-col>
          </ng-container>
          <ion-col size="auto" *ngIf="cardActions.length > 3">
            <ion-icon name="chevron-down-outline" color="secondary" size="large" (click)="expandActions()"></ion-icon>
          </ion-col>
                  
           <ion-col class="ion-text-right" *ngIf="card.status == globalVariables.SYNC_FAILED">CRM Sync failed</ion-col>
           <ion-col class="ion-text-right ion-no-padding">
            <ion-icon name="ellipsis-vertical" size="large" (click)="showCardActions($event, card)" ></ion-icon>
           </ion-col>
        </ion-row>
        <ng-container *ngIf="showMoreActions === true">
            <ion-row class="ion-padding" style="padding-bottom:0px">
              <ng-container *ngFor="let action of cardActions;let i = index">
              <ion-col size="2" *ngIf="i > 2">
                <ion-icon [name]="getLogoName(action.type)" [color]="getLogoColor(action.type)" size="large" (click)="doCardAction(action.type, card)"></ion-icon>
              </ion-col>
            </ng-container>
            </ion-row>
        </ng-container>
       
  </ion-card-content>
  </ion-card>

填充syncedCards的代码如下所示：

const sCards = await this.storage.get("syncedCards")
          this.core.syncedCards = []
          console.log("offline synced cards are:", this.core.syncedCards)
          for(const card of sCards){
            this.core.syncedCards.push(this.core.copyContactDataFromJson(card))
          }

copyContactDataFromJson(cardQ: any) {
    var card = new Card(cardQ._tempContactId, cardQ._frontImageUrl, cardQ._backImageUrl, 
 cardQ._status, cardQ._date, cardQ._userId, cardQ._message, cardQ._objectType)
    card.firstName = cardQ._firstName
    card.lastName = cardQ._lastName
    card.jobTitle = cardQ._jobTitle
    card.company = cardQ._company
    card.email = cardQ._email
    card.mobile = cardQ._mobile
    card.workPhone = cardQ._workPhone
    card.website = cardQ._website
    card.street = cardQ._street
    card.city = cardQ._city
    card.state = cardQ._state
    card.country = cardQ._country
    card.postalCode = cardQ._postalCode
    card.favoriteContact = cardQ._favoriteContact
    card.profilePic = cardQ._profilePic
    card.dept = cardQ._dept
    card.fax = cardQ._fax
    card.workPhoneExtn = cardQ._workPhoneExtn
    card.buddyCode = cardQ._buddyCode
      card.buddyCodeLower = card.buddyCode.toLowerCase()
      card.mobileCountryCode = cardQ._mobileCountryCode
      card.mobileAreaCode = cardQ._mobileAreaCode
      card.mobileNumber = cardQ._mobileNumber
        card.mobileRawNumber = cardQ._mobileRawNumber
      card.workPhoneCountryCode = cardQ._workPhoneCountryCode
      card.workPhoneAreaCode = cardQ._workPhoneAreaCode
      card.workPhoneNumber = cardQ._workPhoneNumber
    card.workRawNumber = ''
      card.workRawNumber = cardQ._workRawNumber
      card.favoriteContact = false
      card.partyId = -1
      card.partyNumber = ''
      card.addressNumber = ''
      card.accountPartyNumber = cardQ._accountPartyNumber
      card.accountPartyId = cardQ._accountPartyId
      card.relationshipRecId = cardQ._relationshipRecId
      card.note = cardQ._note
      card.urlType = cardQ._urlType
    card.socialLinks = cardQ._socialLinks
      card.requireApproval = false

      card.tags = cardQ._tags
      card.phones = cardQ._phones

    return card
  }