如何只获得可见网格的网格？ -角度

Question

我正在将angular应用程序中的ag-grid用作数据网格框架。我找不到任何api来仅获得可见行。表示屏幕上可见的行，不包括由于滚动而隐藏的行。

Answer 1

我确实找到了一种使用下面的脏代码获取可见行的方法-

// skipping the component decorator and template details
     export class GridComponent {
        api: GridApi;
        rowHeight = 48;
        gridBodyHeight;
        scrollPosition = 0;
        visibleRowNodes = []; // this variable holds the visible rows at any moment during the grid's existence
        constructor(private elementRef: ElementRef) {
        }
        public gridReady(params: GridReadyEvent) {
            this.api = params.api;
            const headerElement = this.elementRef.nativeElement.querySelectorAll('.ag-header');
            const agGrid = this.elementRef.nativeElement.querySelectorAll('ag-grid-angular');
            this.gridBodyHeight = agGrid[0].offsetHeight - headerElement[0].offsetHeight;
            this.rowHeight = this.api.getDisplayedRowAtIndex(0) ? this.api.getDisplayedRowAtIndex(0).rowHeight : this.rowHeight;
            this.handleModeUpdateAndScrollEvent();
            // below call is need to get the visible rows when grid is ready
            this.visibleRowsChange.next({top: this.scrollPosition});
          }
          // the visible rows only gets changed on
          // modelUpdated and bodyScroll events
          private handleModeUpdateAndScrollEvent() {
            this.gridOptions.onBodyScroll = (event) => {
              if (event.direction === 'vertical') {
                this.scrollPosition = event.top;
                this.visibleRowsChange.next(event);
              }
            };
            this.gridOptions.onModelUpdated = (event) => {
              this.visibleRowsChange.next({top: this.scrollPosition});
            };
        
            this.visibleRowsChange
              .pipe(debounceTime(1000))
              .subscribe(v => {
                const topIndex = v.top / this.rowHeight;
                const bottomIndex = ((v.top + this.gridBodyHeight) / this.rowHeight) + 1;
                this.visibleRowNodes = this.api.getRenderedNodes().filter(node => node.rowIndex >= topIndex && node.rowIndex <= bottomIndex);
                console.log(this.visibleRowNodes);
              });
          }
        }