Question

当我将ag-grid与无限滚动和单元格渲染器一起使用时，我注意到了奇怪的行为。从数据源接收数据时，单元格渲染器似乎未实例化。向下滚动直到该行不可见时，再向上滚动，则实例化单元格渲染器。我假设单元格渲染器在加载行时立即实例化，是否遇到错误或缺少某些内容？

我当前正在使用ag-grid社区版本来显示只读集合。该数据从处理搜索和过滤的服务器提供。我正在使用Angular 5.2.0，ag-grid 18.0.1和ag-grid-angular 18.0.1。此行为在ag-grid版本17.10.0中也出现。

我已经尝试了cellRenderer：Function（Params），也曾尝试过AgRendererComponent和ICellRendererAngularComp。滚动回到该行时，它们都只调用agInit（Params）。

那么，这是错误还是预期的行为，如果是错误，是否存在已知的解决方法？谢谢您的时间，这是我的代码：

从提供的地图中检索问题答案的组件（列定义中的“字段”是问题的ID）

import { Component, ViewContainerRef } from '@angular/core';
import { AgRendererComponent } from 'ag-grid-angular';

@Component({
    selector: 'editor-cell',
    templateUrl: './answer.component.html'
})
export class AnswerComponent implements AgRendererComponent {

    private answer: any;

    private getAnswer(params: any): string {
        if(params.data == null){
        return;
        }
        if(params.data.answers == null){
            return;
        }
        return params.data.answers[params.colDef.field]
    }

    agInit(params:any):void {
        this.answer = this.getAnswer(params);
        if(this.answer != null){
            console.log("Set on init", this.answer);
        }
    }

    refresh(params:any):boolean {
        this.answer = this.getAnswer(params);
        if(this.answer != null){
            console.log("Set on refresh", this.answer);
        }
        return true;
    }
}

这是我的列定义：（注意：非单元格渲染器确实会立即出现，只有cellRenderer Function和cellRendererFramework不会立即加载。

{
                headerName: 'messages sent',
                field: 'sentMessages',
                suppressFilter: true
            },
            {
                headerName: 'work experience',
                field: '57ceb64efb6b510b857e8a25',
                cellRenderer: function(params){
                    return params.value;
                    if(params.node == null){
                        return ''
                    }
                    if(params.node.data == null){
                        return ''
                    }
                    if(params.node.data.answers == null){
                        return ''
                    }
                    if(params.node.data.answers[params.colDef.field] == null){
                        return ''
                    }
                    return params.node.data.answers[params.colDef.field].nl;
                }
            },
            {
                headerName: 'education',
                field: '57ceb64efb6b510b857e8a26',
                cellRendererFramework: AnswerComponent
            },
            {
                headerName: 'job title',
                field: '5a941e258bdfc300143cf6b0',
                cellRendererFramework: AnswerComponent
            }

数据源

this.datasource = {
    rowCount: null,
    getRows: function(params) {
        ts.query({
            page: Math.floor(params.startRow / 100),
            size: 100,
            filter: JSON.stringify(params.filterModel)
        }).subscribe(
            (res: HttpResponse<any[]>) => {
                let data = res.body;
                let lastRow = -1;
                if (data.length <= params.endRow) {
                    lastRow = data.length;
                }
                params.successCallback(data, -1);
            },
            (res: HttpErrorResponse) => console.log(res.message));
    }
};
this.rowSelection = "multiple";
this.rowModelType = "infinite";
this.maxBlocksInCache = 2;
this.infiniteInitialRowCount = 200;
this.maxConcurrentDatasourceRequests = 2;

组件HTML

<div>
    <ag-grid-angular
        #agGrid
        style="width: 100%; height: 500px;"
        id="myGrid"
        [rowData]="rowData"
        class="ag-theme-balham"
        [columnDefs]="columnDefs"
        [datasource]="datasource"
        [rowModelType]="rowModelType"
        [maxBlocksInCache]="maxBlocksInCache"
        [infiniteInitialRowCount]="infiniteInitialRowCount"
        [maxConcurrentDatasourceRequests]="maxConcurrentDatasourceRequests"
        [enableServerSideFilter]="true"
        [floatingFilter]="true"
        (gridReady)="onGridReady($event)"
        [newRowsAction]="keep"
    ></ag-grid-angular>
</div>

Answer 1

cellRenderer仅在单元格滚动到视图中时被调用。

此博客中所述：8 Performance Hacks for JavaScript

当您在ag-Grid中滚动时，网格正在执行行和列   虚拟化，这意味着DOM已被破坏。这垃圾   非常耗时，如果在事件监听器中进行处理，将会使   滚动体验“粗糙”。

为了解决这个问题，网格使用了滚动事件的反跳   动画帧。这是实现平滑滚动的常见技巧   在本博客Leaner, Meaner, Faster Animations中使用RequestAnimationFrame进行了很好的解释。由于这项技术很好   在上面的帖子中有解释，我在这里不再重复。足以   例如，我们发现这可以带来很好的性能提升。

我也建议您阅读this document regarding Performance提供的ag-grid

Ag Grid单元格渲染器不会实例化，直到向后滚动

1 个答案: