排序对象的属性角材质

问题描述

我正在尝试使用 mat-sort-header 对 mat-table 进行排序.我可以使用字符串或数字等常见属性来实现.

I am trying to sort a mat-table using the mat-sort-header. I am able to do it with common attributes like string or number.

 <table #tablaClientes mat-table [dataSource]="dataSource" matSort multiTemplateDataRows>
  <!-- Id Column -->
  <ng-container matColumnDef="idIngreso">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Id Comprobante</th>
    <td mat-cell *matCellDef="let row">{{row.idIngreso}}</td>
  </ng-container>
  <!-- Proveedor Column -->
  <ng-container matColumnDef="idProveedor">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Nombre Proveedor</th>
    <td mat-cell *matCellDef="let row">{{row.idProveedor.nombre}}</td>
  </ng-container>
  <!-- Fecha Compra Column -->
  <ng-container matColumnDef="fechaCompra">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha de Compra</th>
    <td mat-cell *matCellDef="let row">{{row.fechaCompra}}</td>
  </ng-container>
  <!-- Fecha Recepcion Column -->
  <ng-container matColumnDef="fechaRecepcion">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha de Recepcion</th>
    <td mat-cell *matCellDef="let row">{{row.fechaRecepcion}}</td>
  </ng-container>
  <!-- Monto Total Column -->
  <ng-container matColumnDef="totalIngreso">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Monto Total</th>
    <td mat-cell *matCellDef="let row">{{row.totalIngreso |currency}}</td>
  </ng-container>

但是我不能按 idProveedor 排序，因为它是一个对象.

However I can't sort by idProveedor since it's an object.

非常感谢！

推荐答案

更简单的方法是向 dataSource 添加一个新属性并按这个新属性排序，例如 这个SO(真的，如果您不需要idProveedor"对象，您的数据源可以转换为类似

The easer way is add to your dataSource a new property and sort by this new property like this SO (really if you don't need the "idProveedor" object, your dataSource can be transform to some like

this.data.forEach(x=>{
   x.proveedorNombre=x.idProveedor.nombre
   delete x.idProveedor
}

另一种解决方案是创建一个sortingDataAccesor

Another solution is create a sortingDataAccesor

this.dataSource.sortingDataAccessor = (item, property) => {
     if (property=="idProveedor")
         return item.nombre;
     if (property=="idIngreso")
        return item.idIngreso
     if (property=="fechaCompra")
        return item.fechaCompra

     ...
}

这个stackblitz

这篇关于排序对象的属性角材质的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！