1

在 Angular 7 项目中，有一个事件列表页面，数据限制仅为 10。但每次连续加载更多点击它需要更多时间来加载数据。尽管对 api request(.net) 的调用以毫秒为单位，但时间以秒为单位。

在此处输入图像描述

在调用 api 之后，我正在处理数据，以便根据日期和时间间隔对它们进行分组，并在 2 个相等的列中显示召集人数据，如下所示。

    if ( dotnetresponse.status == 'Ok' ) {
        this.schedule_data = dotnetresponse.programmes;
        var groupByInterval = {};                   
        let c = this.schedule_data;    
        this.schedule_data.forEach( function( a, b, c ) {
            a.class = '';
            if ( b > 0 ) {
                if ( a.dateInterval != c[b - 1].dateInterval ) {
                    a.class = 'blue-separator';
                }
            } else if ( b == 0 ) {
                if ( a.dateInterval == c[b].dateInterval ) {
                    a.class = 'blue-separator';
                }
            }    
            if ( a.convenors.length > 0 ) {
                var leftConvenor = [];
                var rightConvenor = [];
                var convenor_count = a.convenors.length;
                var convenor_half_count = Math.round( convenor_count / 2 );
                if ( 1 == convenor_count ) {
                    leftConvenor = a.convenors;
                }
                if( 1 < convenor_count ) {
                    a.convenors.forEach( function ( a, b ){
                        if ( b < convenor_half_count ) {
                            leftConvenor.push( a );
                        } else {
                            rightConvenor.push( a );
                        }
                    });
                }
            }    
            groupByInterval [ a.dateInterval ] = groupByInterval [ a.dateInterval ] || [];
            groupByInterval [ a.dateInterval ].push({ val : a, lConvenor : leftConvenor, rConvenor : rightConvenor });
                    });     
            var myArray1 = Object.keys( groupByInterval ).map( function( key ) {
            var interval_arr = key.split( '|' );
            var day  = interval_arr[0];
            var time = interval_arr[1];
                            
            return { interval: key, values: groupByInterval[ key ], day: day, time: time, eventSeparatorClass: groupByInterval[ key ][0].val.class };
   });
            let last:any = this.scheduleDotNetData[ this.scheduleDotNetData.length - 1 ];
            for ( let value of myArray1 ) {
                if ( last.interval == value.interval ) {
                    for( let val of value.values ) {
                        this.scheduleDotNetData[this.scheduleDotNetData.length-1].values.push(val);
                    }
                } else {
                    this.scheduleDotNetData.push( value );
                }
            }
            let count = this.schedule_data.length;    
            if ( count >= dotnetresponse.limit ) {  
                this.showMoreButton = true;
                this.filterCount = 1;
            } else {
                this.showMoreButton = false;
                this.filterCount = 0;
            }    
            this.loadMoreButton = false;            
  }

关于正在发生的事情以及如何解决此问题的任何想法？欢迎任何帮助/建议。

4

0 回答 0