Búsqueda de sitios web

angular - mat-sort-header/mat-sort no funciona en una columna en particular

mat-sort no funciona en una columna de un mat-table que proviene de una base de datos, el resto de las columnas funcionan perfectamente. La única diferencia es que estoy obteniendo datos para esta columna desde otro servicio.

Intenté resolverlo con ngAfterViewInit pero sin éxito.

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

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Resource </th>
  <td mat-cell *matCellDef="let element"> {{element.creator.name}} </td>
  <td mat-footer-cell *matFooterCellDef> </td>
</ng-container>

displayedColumns: string[] = ['projectName', 'date', 'hours', 'description', 'name', 'location', 'Edit'];

@ViewChild(MatSort) sort: MatSort;

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

Respuesta #1

No conociendo tu modelo de datos, algo como esto debería resolver tu problema (en tu ngOnInit):

this.dataSource.sortingDataAccessor = (item, property) => {
  if (property === 'name') {
    return item.creator.name;
  } else {
    return item[property];
  }
};

El ordenamiento no funciona en este campo porque Angular intenta acceder a los datos de la columna a través del ID en forma de cadena, que para esta columna es name, pero los datos de la columna en realidad se encuentran bajo element.creator.name (Angular está buscando bajo element.name).

Para obtener más información, consulte la documentación completa aquí (al final de la página) donde se indica:

Función de acceso a datos que se utiliza para acceder a las propiedades de los datos para ordenar a través de la función sortData predeterminada. Esta función predeterminada asume que los ID de los encabezados de ordenación (que por defecto son el nombre de la columna) coinciden con las propiedades de los datos (por ejemplo, la columna Xyz representa data['Xyz']). Puede configurarse con una función personalizada para un comportamiento diferente.

Respuesta #2

Si uno de los campos en tu mat-table no está funcionando, entonces necesitas revisar tus displayedColumns con el código HTML matColumnDef.

Si eso no coincide, entonces necesitas hacerlo común en ambos lados ts y html.

Por ejemplo: displayedColumns tiene NAME, TAGSCREENS en el lado de TS y en el lado de HTML das otro nombre, entonces el encabezado de orden no funciona; si lo haces común, entonces funcionará para ti.

displayedColumns: string[] = ['name', 'tagScreens'];
dataSource= new MatTableDataSource([]);

Necesitas importar este componente MatSort

@ViewChild(MatSort, { static: true }) sort: MatSort;

<ng-container matColumnDef="name">
     <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
     <mat-cell *matCellDef="let element">{{element.name}} </mat-cell>
</ng-container>

 <ng-container matColumnDef="tagScreens">
     <mat-header-cell *matHeaderCellDef mat-sort-header> Screens </mat-header-cell>
     <mat-cell *matCellDef="let element">
            {{ element.tagScreens.length > 0 ? (element.tagScreens | separateWithComa : seprateWithCommaPipeConst.name) : 'NA'}}
      </mat-cell>
 </ng-container>

Para más información Haz clic aquí

Artículos relacionados