如何通过单击ag-grid中的按钮获取行数据

Question

我写了一个角度代码来显示ag-grid中的数据。 我想要的是每当我点击特定单元格中的按钮时我想获得整个行数据。 但是我的代码是如何工作的每当我选择可以获取数据的行时，每当我取消选择行数据被删除时。 任何人都可以帮我解决这个问题吗？ 这是我的代码：

文件process.component.ts

export class FileProcessComponent implements OnInit {

  searchResults : Array<String>;
  private selectedRows = [];
  selectionMode = "multiple";

  path = "http://localhost:3028/controller/getDirectoriesWithFiles";

  serialNumber = 1;
  getIndexValue(){
   return this.serialNumber++;
  }

  columnDefs =[
    {headerName:"S No", valueGetter: (args) => this.getIndexValue(),checkboxSelection : true,headerCheckboxSelection: false,
    headerCheckboxSelectionFilteredOnly: true,cellRenderer: 'selectedClient'}, 
    {headerName : 'Directory Name', field:'directory', sortable:true},
    {headerName : 'Options',cellRenderer : 'buttonRenderer' ,
     template : `
     <button type="button" (click)="this.deleteDir($event)">Delete</button>
     `
    }
  ]

  constructor(private http: HttpClient,private r : Router, private dp : DirPathComponent, private sf : ShowFilesComponent) {
    this.http.get(this.path).subscribe(
      (data: any) => {
        this.searchResults = data;
        console.log(this.searchResults);
        this.serialNumber = this.searchResults.length- this.searchResults.length+1;
      },
      error => console.log(error)
    );

   }
   private params;
   dirPath = 'http://localhost:3028/controller/setDirectory';
   addDirectory(dirPath) : void{    
    this.params = new HttpParams();
    this.params = this.params.append('path', dirPath);
    this.http.get(this.dirPath, { params: this.params }).subscribe((data: any) => {

      this.http.get(this.path).subscribe(
      (data: any) => {
        this.searchResults = data;
        console.log(this.searchResults);
      },
      error => console.log(error)
    );
    });
   }

   onRowClicked(event){
    let temp = 0;
    for(let i = 0; i < this.selectedRows.length; i++){
      if(this.selectedRows[i] == event.node.data.directory){
        this.selectedRows.splice(i,1);
        temp = 1;
      }
    }
    if(temp === 0){
      this.selectedRows.push(event.node.data.directory);
    }
  }
  deleteDir(event){
    // here I want which row is selected to delete
  }

  ngOnInit() {
  }
}

文件-process.html：

 <div class="page-body"> <div class="row"> <div class="col-sm-12"> <app-card [title]="file-process"> <div style="float:left"> <h4>Add directory</h4> <form> <input type="search" #path name="query"> <button type="button" (click)="addDirectory(path.value)">Add</button> </form> </div> </app-card> </div> </div> </div> <div class="page-body"> <div class="row"> <div class="col-sm-12"> <app-card [title]="file-process"> <ag-grid-angular style="width : 605px; height:250px;" class="ag-theme-balham" [rowData]="searchResults" [columnDefs]="columnDefs" [rowSelection]="selectionMode" [rowMultiSelectWithClick] = true (rowClicked)="onRowClicked($event)" > </ag-grid-angular> </app-card> </div> </div> </div> 

Answer 1

我知道您的网格允许多个选择，但我不确定您是仅尝试获取所选行，还是获取所有选定的行。 您需要进行以下修改：

在.html上，包含rowSelected的事件绑定（您可以在API规范中阅读更多相关内容）：

<ag-grid-angular (rowSelected)="onRowSelect($event)" . . . . .></ag-grid-angular>

在component.ts上，您可以处理行选择事件。 如果您只想获取所选行，则可以执行以下操作：

onRowSelect(event) {
  console.log(event.data)
  // handle event.data which is the object with the selected row data
}

如果要在选择时获取所有选定的行，可以使用getSelectedRows ，它是Ag-grid API的一部分。 如果要使用它，请记得初始化网格API。

在你的.html上，

<ag-grid-angular (rowSelected)="onRowSelect($event)" (gridReady)="onGridReady($event) . . . . .></ag-grid-angular>

在你的component.ts上，

onGridReady(params) {
  this.gridApi = params.api;
}

onRowSelect(event) {
  const selectedRows = this.gridApi.getSelectedRows();
  console.log(selectedRows);
}