Angular ag-grid加载时删除按钮始终禁用，需设为启用状态

Hey there! I see you're stuck with your custom delete button staying disabled even when you explicitly set eButton.disabled = false—let's get this sorted out.

First, the Quick Fix: Return Your DOM Element #

Looking at your deleteButtonRenderer function, you're creating the button element but not returning it to ag-Grid. ag-Grid needs that returned element to render it in the cell; without it, it might be falling back to a default rendering that automatically adds the disabled attribute.

Update your renderer to include the return statement:

deleteButtonRenderer(params) { 
  var eDiv = document.createElement('div'); 
  eDiv.innerHTML = '<div class="bs-component"><button type="button" class="btn btn-primary btn-sm" id="btnDelete">Delete</button></div>'; 
  var eButton = eDiv.querySelector("#btnDelete") as HTMLButtonElement; // Fixed type to match button element
  // Add a click handler if you need to trigger delete logic
  eButton.addEventListener('click', () => {
    console.log('Delete clicked for row:', params.data);
    // Insert your delete logic here
  });
  eButton.disabled = false; 
  console.log(eButton); 
  return eDiv; // Don't forget this critical line!
}

Better Long-Term Solution: Use an Angular Component as Cell Renderer #

Since you're working in Angular, raw DOM operations can lead to issues with change detection and maintainability. ag-Grid integrates seamlessly with Angular components—here's how to set that up properly:

1. Create an Angular component for the delete button:

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  template: `
    <div class="bs-component">
      <button type="button" class="btn btn-primary btn-sm" (click)="onDeleteClick()">
        Delete
      </button>
    </div>
  `
})
export class DeleteButtonRendererComponent implements ICellRendererAngularComp {
  private params: any;

  agInit(params: any): void {
    this.params = params;
  }

  refresh(params: any): boolean {
    return true;
  }

  onDeleteClick() {
    // Trigger your delete logic here, access row data via this.params.data
    console.log('Deleting row:', this.params.data);
    // Example: this.params.context.componentParent.handleDelete(this.params.data);
  }
}

2. Register the component with ag-Grid in your parent component:

import { DeleteButtonRendererComponent } from './delete-button-renderer.component';

// ...

ngOnInit() { 
  this.components = {
    deleteButtonRenderer: DeleteButtonRendererComponent
  };

  this.columnDefs = [ 
    {field: "email", headerName: "Email Address", colId: "email", width: 200, editable: true}, 
    {headerName: '', field: 'changeButton', colId: "changeButton", width: 25, cellRenderer: this.changeButtonRenderer, filter: false, sortable: false}, 
    {headerName: '', field: 'deleteButton', colId: "deleteButton", width: 25, cellRenderer: 'deleteButtonRenderer', filter: false, sortable: false} 
  ]; 
  this.getEmails();
}

3. Add the component to your module's declarations and entryComponents:

@NgModule({
  declarations: [
    // ... other components
    DeleteButtonRendererComponent
  ],
  entryComponents: [
    DeleteButtonRendererComponent // Required for ag-Grid to initialize the component
  ]
})
export class YourFeatureModule { }

Why This Happened #

The core issue was that your cell renderer function didn't return the DOM element you created. ag-Grid relies on this return value to inject your custom content into the cell. Without it, it was likely using a default cell rendering that includes a disabled state, overriding your manual disabled=false setting.

Using an Angular component instead of raw DOM operations will also make your code more maintainable, align with Angular's best practices, and avoid potential change detection issues down the line.

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