0
613
Vistas¿Cómo eliminar filas duplicadas en AG Grid?
Estaba experimentando con AG Grid en Angular e inmediatamente me enfrenté a un desafío.
Quiero asegurarme de que AG Grid muestre filas únicas.
¿Debo iterar sobre la cuadrícula y eliminar las filas duplicadas o verificar si ya existe una fila con esos valores en la cuadrícula?
Estaba pensando en usar un conjunto para este desafío. Espero recibir ayuda para encontrar la solución más eficiente en el código.
grid-test.component.html
<!-- Button to clear selection --> <button (click)="clearSelection()">Clear Selection</button> <!-- AG Grid Angular Component --> <ag-grid-angular style="width: 70%; height: 100%; display: block; margin-left: auto; margin-right: auto;" class="ag-theme-alpine" [columnDefs]="columnDefs" [defaultColDef]="defaultColDef" [rowData]="rowData$ | async" [rowSelection]="'multiple'" [animateRows]="true" (gridReady)="onGridReady($event)" (cellClicked)="onCellClicked($event)" ></ag-grid-angular>grid-test.component.ts
import { HttpClient } from '@angular/common/http'; import { Component, OnInit, ViewChild } from '@angular/core'; import { AgGridAngular } from 'ag-grid-angular'; import { CellClickedEvent, ColDef, GridReadyEvent } from 'ag-grid-community'; import { Observable } from 'rxjs'; @Component({ selector: 'app-grid-test', templateUrl: './grid-test.component.html', styleUrls: ['./grid-test.component.css'] }) export class GridTestComponent implements OnInit { ngOnInit(): void { } // Each Column Definition results in one Column. public columnDefs: ColDef[] = [ { field: 'make'}, { field: 'model'}, { field: 'price' } ]; // DefaultColDef sets props common to all Columns public defaultColDef: ColDef = { sortable: true, filter: true, }; // Data that gets displayed in the grid public rowData$!: Observable<any[]>; // For accessing the Grid's API @ViewChild(AgGridAngular) agGrid!: AgGridAngular; constructor(private http: HttpClient) {} // Example load data from sever onGridReady(params: GridReadyEvent) { this.rowData$ = this.http .get<any[]>('https://www.ag-grid.com/example-assets/row-data.json'); } // Example of consuming Grid Event onCellClicked( e: CellClickedEvent): void { console.log('cellClicked', e); } // Example using Grid's API clearSelection(): void { this.agGrid.api.deselectAll(); } }1 Respuestas
Responde la pregunta0
Hay varios enfoques que puede tomar para asegurarse de que no haya filas duplicadas que tengan los mismos datos.
Un enfoque sería iterar sobre cada fila usando api.forEachNode y realizar un seguimiento si ya existe una fila.
Otro enfoque sería crear un conjunto a partir de los datos de la fila actual y luego volver a convertirlo en una matriz. Puede ver un ejemplo de esto implementado en el siguiente plunkr .
onBtnRemove() { const rowDataSlash = new Set( this.rowData.map((row) => row.make + '/' + row.model + '/' + row.price) ); const newRowData = Array.from(rowDataSlash).map((row) => { const rowParts = row.split('/'); return { make: rowParts[0], model: rowParts[1], price: rowParts[2] }; }); this.rowData = newRowData; }