3
votes

La comparaison de deux grands objets angulaires ralentit le rendu

J'ai deux observables extraits de RTDB. L'un est les questions (500 éléments) et l'autre est les réponses (2000 éléments).

J'utilise * ngFor imbriqué pour comparer et afficher les questions et les réponses respectives. Cela fonctionne bien, mais le rendu est lent et retarde l'ensemble de l'application.

 <ion-slide *ngFor="let q of questions | async ">
      <ion-card>
        <ion-card-header>{{q.label}}</ion-card-header>
        <ion-card-content >
          <div *ngFor="let a of answers | async">
            <ion-item *ngIf="q.idWeb == a.question_id">
                <ion-label>{{a.value}}</ion-label>
                <ion-radio value="{{a.good}}"></ion-radio>
              </ion-item>
            </div>
        </ion-card-content>
      </ion-card>
    </ion-slide>

Malheureusement, je ne peux pas changer le schéma des données dans Firebase. Je dois travailler uniquement avec cela. Veuillez suggérer une solution pour améliorer les performances.

angular ionic4

1 commentaires

Cela pourrait vous aider. lien

3 Réponses :

0
votes

utilisez trackBy pour améliorer les index comme ci-dessous. Cela améliorera les performances lors du re-rendu uniquement.

@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li>
    </ul>
    <button (click)="getItems()">Refresh items</button>
  `,
})
export class App {

  constructor() {
    this.collection = [{id: 1}, {id: 2}, {id: 3}];
  }

  getItems() {
    this.collection = this.getItemsFromServer();
  }

  getItemsFromServer() {
    return [{id: 1}, {id: 2}, {id: 3}, {id: 4}];
  }

  trackByFn(index, item) {
    return index; // or item.id
  }
}

Suivez ce lien pour plus d'informations.

https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5

2 commentaires

Cela peut fonctionner pour le re-rendu, mais pour le premier rendu, cela ne changera rien.

mis à jour ma réponse pour ceux qui recherchent un cas de re-rendu. Merci

4
votes

Vous pouvez utiliser le kit de développement commun fourni par l'équipe Angular.

Commencez par installer le CDK si vous ne l'avez pas fait:

npm i @angular/cdk

Une fois installé, vous pouvez suivre ce guide pour implémenter un scroll virtuel facile.

Cela ne rendra que les éléments de la fenêtre, ce qui se traduira par un rendu plus rapide.

1 commentaires

Mais vraiment, vous devriez changer de modèle. «C'est déjà comme ça» n'est pas une excuse: lorsque vous avez des problèmes de performances, vous optimisez, quel que soit le coût.

-1
votes

J'ai trouvé un moyen de remédier à cette situation. Panneau d'extension utilisé de la bibliothèque de matériaux angulaires. Il fournit de nombreuses propriétés, j'ai utilisé une propriété ouverte pour appeler une fonction et récupérer des options pour cette question particulière uniquement chaque fois que le panneau est développé. fonctionne bien maintenant.

 <mat-accordion>

      <ion-card *ngFor="let q of questions | async">

          <mat-expansion-panel  (opened)="fetchAnswers(q)" >
              <mat-expansion-panel-header >
                  <mat-panel-description [innerHtml]="q.label">
                    </mat-panel-description>
              </mat-expansion-panel-header>

                <ion-item *ngFor="let a of answers | async">
                  <ion-icon slot="start" name="create"></ion-icon>
                  <ion-label>
                    <p>{{a.value}}</p>
                  </ion-label>
                </ion-item>

            </mat-expansion-panel>

      </ion-card>
</mat-accordion>

espérons que cela aidera quelqu'un coincé dans une situation similaire.

note: la première méthode était de toute façon vouée à l'échec car les données sont censées atteindre 50 000 pour les réponses objet et 15000 pour l'objet de questions dans un proche avenir.

0 commentaires