Как оптимизировать загрузку данных в приложении Ionic 4 - Angular 7

Question

У меня есть объект с 1000 элементами в нем.

Я загружаю эти данные в пользовательском интерфейсе, но приложение не может обработать такой большой объем данных.

Есть ли какой-нибудь подход к управлению огромными данными в Angular?

Вот мой код:

Контроллер

    import { Component, OnInit } from '@angular/core';
    import { bouquetList } from '../../assets/bouquet';

    interface BouquetInfo {
      name: string;
      mrp: number;
      channel: string[];
    }

    export interface Bouquet {
      broadcaster: {
        name: string;
        bouquet: BouquetInfo[];
      };
    }

    @Component({
      selector: 'app-bouquet',
      templateUrl: './bouquet.page.html',
      styleUrls: ['./bouquet.page.scss'],
    })
    export class BouquetPage implements OnInit {

      bouquets: Bouquet[] = bouquetList; // assiging a const of large data

      constructor() { }


    }

html

<mat-accordion>
        <mat-expansion-panel *ngFor="let bouquet of bouquets" >
            <mat-expansion-panel-header>
                <mat-panel-title>
                    {{bouquet.broadcaster.name}} | 
         {{bouquet.broadcaster.bouquet.length }}
                </mat-panel-title>
                <mat-panel-description>
                </mat-panel-description>
            </mat-expansion-panel-header>

            <div *ngIf="!currentBouquet[0]; then thenBlock else elseBlock"></div>
            <ng-template #thenBlock>Loading...</ng-template>

            <ng-template #elseBlock>
                <mat-accordion>
                    <mat-expansion-panel *ngFor="let channel of bouquet.broadcaster.bouquet">
                      <mat-expansion-panel-header>
                        <mat-panel-title>
                            {{channel.name}}
                        </mat-panel-title>
                        <mat-panel-description>
                            {{channel.mrp | currency: 'INR' }}
                        </mat-panel-description>
                      </mat-expansion-panel-header>

                      <mat-list role="list"  *ngFor="let item of channel.channel; let i=index">
                          <mat-list-item role="listitem">{{i + 1}}. {{item}}</mat-list-item>
                        </mat-list>


                    </mat-expansion-panel>
                  </mat-accordion>
            </ng-template>


        </mat-expansion-panel>
    </mat-accordion>

UI для вашей идеи

Answer 1

Я бы сгенерировал индекс только для верхнего уровня, разгрузил основные данные во что-то вроде Firebase, затем запросил бы индекс для основной записи.Это супер-быстрый.