angular - Cómo obtener los datos de la fila al hacer clic en el botón en ag-grid

He escrito un código en Angular para mostrar datos en ag-grid. Lo que quiero es que cada vez que haga clic en el botón en una celda en particular, quiero obtener los datos de toda la fila. Pero mi código funciona de manera que cada vez que selecciono la fila puedo obtener los datos, y cada vez que deselecciono la fila, los datos se eliminan. ¿Alguien puede ayudarme a resolver esto? Aquí está mi código:

archivo-proceso.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() {
  }
}

archivo-proceso.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>

Respuesta #1

Entiendo que su cuadrícula permite selección múltiple, pero no estoy seguro si está intentando obtener solo la fila seleccionada o todas las filas seleccionadas. Necesita hacer las siguientes modificaciones:

En tu .html, incluye el enlace de eventos para rowSelected (puedes leer más sobre ello en las especificaciones de la API):

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

Y en tu component.ts, puedes manejar el evento de selección de fila. Si solo quieres obtener la fila seleccionada, puedes hacer esto:

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

Si quieres obtener todas las filas seleccionadas al hacer una selección, puedes usar getSelectedRows que es parte de la API de Ag-grid. Recuerda inicializar la API de la cuadrícula si vas a usarla.

En tu .html,

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

Y en tu component.ts,

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

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