Ag-Gridは各行に削除ボタンが必要です

Question

私はag-gridで解決策を実装しようとしていますが、問題にはまっていません。私は、各行の編集と削除ボタンを実装しようとしています。編集ボタンの実装は成功しましたが、問題は削除ボタンです。

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

- ：私は、コードの下あたりのような実装を参照しなさい（2角度のために少しである）私の知る限りを試してみましたこの機能で

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が楽しいではないと私はエラーが供給していますction。これを達成するために私を助けてもらえますか？

Answer 1

この関数はaggrid 10+で導入されました。問題を解決したのは8 +を使用しています。