es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo puedo ordenar enteros grandes con coma (por ejemplo, 54,45,444) en una columna con mat-sort?

¿Cómo puedo ordenar enteros grandes con coma (por ejemplo, 54,45,444) en una columna con mat-sort?

19 Jul, 2023 Programación

No puedo ordenar la columna en la tabla de Mat Table con mat sort cuando se muestran números. Los números devueltos por la API están separados por comas en los lugares de cientos, miles, etc.

Html

<ng-container matcolumndef="amount">
  <th mat-header-cell="" *matheadercelldef="" mat-sort-header=""> Cantidad </th>
  <td mat-cell="" *matcelldef="let element"> {{element.amount}} </td>
  <td mat-footer-cell="" *matfootercelldef=""> </td>
</ng-container>

.Ts

displayedColumns: string[] = ['amount', 'name'];

@ViewChild(MatSort) sort: MatSort;

ngOnInit(){
  this.dataSource.sort = this.sort;
}

ngAfterViewInit(){
  this.dataSource.sort = this.sort;
};
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para ordenar la columna en una tabla de Material con mat sort mostrando números, puedes crear una función de ordenación personalizada.

    Primero, necesitas analizar los números separados por comas y convertirlos en números reales. Puedes usar las funciones parseInt() o parseFloat() para esto.

    const customSort = (data: any[], sort: MatSort) => {
  const sortedData = [...data];
  const activeSort = sort.active;

  if (activeSort === 'amount') {
    sortedData.sort((a, b) => {
      const aAmount = parseFloat(a.amount.replace(/,/g, ''));
      const bAmount = parseFloat(b.amount.replace(/,/g, ''));
      const isAsc = sort.direction === 'asc';
      return isAsc ? aAmount - bAmount : bAmount - aAmount;
    });
  } else {
    sortedData.sort((a, b) => { /* función de ordenación predeterminada */ });
  }

  return sortedData;
};

    Luego, puedes configurar la propiedad sortData del origen de datos a esta función personalizada:

    ngAfterViewInit() {
  this.dataSource.sort = this.sort;
  this.dataSource.sortData = (data, sort) => customSort(data, sort);
}

    Esto asegurará que los montos se ordenen correctamente según sus valores numéricos, sin tener en cuenta las comas.

Comments are closed.