angular - 如何优化 Ionic 4 中的数据加载

问题描述

我有一个包含 1000 个项目的对象。

我正在 UI 中加载这些数据，但应用程序无法处理如此大量的数据。

有什么方法可以在 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

标签： angularangular-materialionic4

angular - 如何优化 Ionic 4 中的数据加载 - Angular 7 App

问题描述

解决方案

推荐阅读