如何以角度在 ag-grid 上触发 firstDataRendered？

Posted 2023-03-28

【中文标题】如何以角度在 ag-grid 上触发 firstDataRendered？

【英文标题】：how to trigger firstDataRendered on ag-grid in angular?

【发布时间】：2021-04-10 14:05:23

【问题描述】：

我的组件有获取数据的输入 我用 firstDataRendered 选择第一行。 问题是当输入数据发生变化时，网格不会触发事件 如何根据我的输入变化触发网格事件？

 <ag-grid-angular
  #agGrid
  class="ag-theme-alpine"
  style="width: 100%; height: 500px"
  [rowData]="flights"
  [columnDefs]="columnDefs"
  [rowSelection]="'single'"
  (gridReady)="onGridReady($event)"
  (firstDataRendered)="onFirstDataRendered($event)"
>
</ag-grid-angular>

import 
  Component,
  Input,
  OnChanges,
  OnInit,
  SimpleChanges,
 from '@angular/core';
import  Flight  from './model/flight.interface';

@Component(
  selector: 'app-worker-flights-list',
  templateUrl: './worker-flights-list.component.html',
  styleUrls: ['./worker-flights-list.component.css'],
)
export class WorkerFlightsListComponent implements OnInit, OnChanges 
  @Input() flights: Flight[] = [];
  gridApi: any;
  rendered: boolean;
  columnDefs = [
     headerName: 'Flight Number', field: 'num' ,
     headerName: 'Origin', field: 'from' ,
     headerName: 'Origin Date', field: 'from_date' ,
     headerName: 'Destination', field: 'to' ,
     headerName: 'Destination Date', field: 'to_date' ,
  ];
  constructor() 
  ngOnChanges(changes: SimpleChanges): void 
    if (changes['flights'] && this.rendered) 
      // this.gridApi.api.getDisplayedRowAtIndex(0).setSelected(true);
    
  

  ngOnInit(): void 
  onGridReady(grid: any): void 
    debugger;
    this.gridApi = grid;
  
  onFirstDataRendered(params: any): void 
    this.rendered = true;
    this.gridApi.api.getDisplayedRowAtIndex(0).setSelected(true);
  

【参考方案1】：

事件firstDataRendered 只会在第一次数据被渲染时触发，而不是在每次数据被渲染或更新时触发。查看事件定义here。

一种解决方案是像这样利用rowDataChanged 事件：

onRowDataChanged(params: any): void 
    this.rendered = true;
    params.api.getDisplayedRowAtIndex(0).setSelected(true);
  

查看演示here