Angular 19动态AG Grid表格报错及操作按钮不显示求助

1. 解决AG Grid无效gridOptions属性报错 #

原因 #

模板中同时绑定gridOptions和单独的AG Grid输入属性（如rowData、columnDefs），导致AG Grid解析时出现属性冲突，触发无效属性报错。

修复步骤 #

修改grid-table.component.html，移除所有单独的属性绑定，完全通过agGridOptions传递配置：

<div style="height: calc(100vh - 250px) !important">
  <ag-grid-angular
      class="ag-theme-alpine h-100"
      [gridOptions]="agGridOptions"
      (gridReady)="onGridReady($event)"
      [components]="components">
  </ag-grid-angular>
</div>

同时修正onGridReady方法中columnApi的取值错误：

onGridReady(params: any) {
  this.gridReady.emit({ api: params.api, columnApi: params.columnApi });
}

2. 修复操作按钮不显示问题 #

原因 #

RowActionsRendererComponent中获取操作项的逻辑错误：传入的gridState是包含actions字段的对象，但组件错误读取gridState.rowActions导致返回空数组；同时类型定义与实际数据结构不匹配。

修复步骤 #

步骤1：修正类型定义（row-actions-renderer.component.ts）

更新GridStateProps接口匹配实际传入的rowActions结构：

interface GridStateProps {
  actions?: (string | RowActionProps)[];
  columnTitle?: string;
  width?: number;
  formCreateOpen?: boolean;
  activeRowData?: any;
}

步骤2：修正操作项获取逻辑

修改get actions方法，从gridState.actions读取数据：

get actions(): RowActionProps[] {
  return (this.gridState?.actions || []).map((ROW) => {
    if (typeof ROW === 'string') {
      return {
        name: ROW === 'edit' ? 'Edit' : 'Delete',
        iconOnly: true,
        icon: ROW === 'edit' ? 'pi pi-pencil' : 'pi pi-trash',
        onClick: ROW === 'edit'
          ? (data) => this.updateGrid.emit({ formCreateOpen: true, activeRowData: data })
          : undefined,
      };
    }
    return { ...ROW };
  });
}

步骤3：触发变更检测（可选）

在RowActionsRendererComponent中注入ChangeDetectorRef，确保属性更新后视图同步：

import { ChangeDetectorRef } from '@angular/core';

// 构造函数注入
constructor(private cdr: ChangeDetectorRef) {}

agInit(params: any): void {
  this.data = params.data;
  this.gridState = params.context?.gridState || {};
  this.cdr.detectChanges();
  console.log('trigger')
}

refresh(params: any): boolean {
  this.data = params.data;
  this.gridState = params.context?.gridState || {};
  this.cdr.detectChanges();
  return true;
}

额外验证点 #

• 确认传入GridTableComponent的rowActions结构正确，示例：

  rowActions = {
    columnTitle: '操作',
    width: 120,
    actions: ['edit', 'delete']
  };
  

• 检查ngAfterViewInit中agGridOptions是否正确合并了操作列定义。

内容的提问来源于stack exchange，提问作者ABC