Ag-Grid 要求每一行都有删除按钮答案

【问题标题】：Ag-Grid require delete button for each rowAg-Grid 要求每一行都有删除按钮
【发布时间】：2018-01-23 00:31:56
【问题描述】：

我正在尝试使用 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 不是函数。你能帮我实现这个吗？

【问题讨论】：

仔细检查您的拼写。在您的代码中，您有 updateRows数据，该函数应该没有 s
同样的错误。你确定？？？
@Jarod 你绝对正确拼写不正确，但错误仍然存在

标签： angularjs ag-grid

【解决方案1】：

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

【讨论】：

【解决方案2】：

该代码的真正问题在于

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

在版本 22.X.X 中需要一个数组

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

【讨论】：

这可能是以前的情况，但是对于当前版本的 ag-grid，正确的方法是 api.applyTransaction({ remove: selectedData }); 一些示例可用 here。