Сортировка атрибута объекта Angular Material

Я пытаюсь отсортировать мат-таблицу, используя заголовок мат-сортировки. Я могу сделать это с помощью общих атрибутов, таких как строка или число.

 <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, так как это объект.

Большое спасибо!


angular html angular-material mat-table
person TomiEcio    schedule 09.12.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Более простой способ - добавить в ваш источник данных новое свойство и отсортировать по этому новому свойству, например это ТАК (на самом деле, если вам не нужен объект idProveedor, ваш источник данных может быть преобразован в какой-то вроде

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

Другое решение - создать 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

person Eliseo    schedule 29.12.2020