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

【问题标题】：how to trigger firstDataRendered on ag-grid in angular?如何以角度在 ag-grid 上触发 firstDataRendered？
【发布时间】：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);
  }
}

【问题讨论】：

标签： angular8 ag-grid

【解决方案1】：

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

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

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

查看演示here

【讨论】：