Question

我正在尝试使用ag-grid实现一个解决方案而不是遇到问题。我试图在每一行中实现编辑和删除按钮。编辑按钮实现成功但问题是删除按钮。我尽了最大的努力（对于角度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需要每行删除按钮

2 个答案: