Ag-Grid 每行需要删除按钮

Question

我正在尝试使用 ag-grid 实施解决方案，但没有遇到问题。我正在尝试在每一行中实现编辑和删除按钮。编辑按钮实现成功，但问题在于删除按钮。我已尽我所能（这对 angular 2 来说很少）。请按照以下代码查看实现：-

court.component.ts

import { Component } from '@angular/core';
import { Court } from './court.model';
//import './../utils/array.extensions';

import { GridOptions } from "ag-grid";
import { DataCourtService } from '../services/data-court.service';
import { EditButtonComponent } from "../utils/editbutton.component";

 @Component({
     selector: 'court',
    template: require('./court.component.html'),
    providers: [DataCourtService]
})

export class CourtComponent {
   private gridOptions: GridOptions;
   public courts : Court[];
   onQuickFilterChanged(event: any) {
    this.gridOptions.api.setQuickFilter(event.target.value);
   }
    constructor() {
        var courtservice = new DataCourtService();
        this.gridOptions = {
            rowSelection: 'single'
        };

      //   this.gridOptions.angularCompileRows = true;
        this.gridOptions.columnDefs = [

            {
                headerName: "Court Name",
                field: "courtname",                
                editable: true   
            } ,
            {
                headerName: "Action",
                cellRendererFramework: EditButtonComponent,
                colId: "edit"
            }

        ];

        this.gridOptions.rowData = courtservice.getCourt();

    }
}

EditButton.component.ts

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

@Component({
    selector: 'edit-button',
    template: `<button (click)="invokeEditMethod()" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit"></span>Edit</button>
               <button (click)="invokeDeleteMethod()" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span>Delete</button>`
})
export class EditButtonComponent implements ICellRendererAngularComp {
    public params: any;

    agInit(params: any): void {
        this.params = params;
    }
public invokeDeleteMethod() {
       var selectedData = this.params.api.getSelectedRows();
       this.params.api.updateRowsData({remove: selectedData});          
     alert("hi");

}
    public invokeEditMethod() {


         this.params.api.setFocusedCell(this.params.node.rowIndex, 'courtname');
         this.params.api.startEditingCell({
         rowIndex: this.params.node.rowIndex,
        colKey: 'courtname',
        }
     );
    }

}

在这个函数中

public invokeDeleteMethod() {
           var selectedData = this.params.api.getSelectedRows();
           this.params.api.updateRowsData({remove: selectedData});          
         alert("hi");

    }

我收到一条错误消息，因为 UpdateRowData 不是一个函数。你能帮我实现这个目标吗？？

Answer 1

此功能是在 aggrid 10+ 中引入的，我正在使用 8+。更新它解决了问题。

Answer 2

该代码的真正问题在于

this.params.api.updateRowsData({remove: selectedData});

需要版本为 22.X.X

的数组

this.params.api.updateRowsData({remove: [selectedData]});

Ag-Grid 每行需要删除按钮

Ag-Grid require delete button for each row

angularjs

ag-grid