Angular Material 5 - Mat-Table Sort

Question

The Type and Date fields are not ordering in descending order to the user’s command, the code . ts and html is attached: If anyone has an explanation/solution please share.

import { Component, OnInit, ViewChild, Input} from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { listaApiService } from '../../../../services/api/lista-api.service';

@Component({
    selector: 'app-listar-lista',
    templateUrl: './listar-lista.component.html',
   styleUrls: ['./listar-lista.component.css']
})
export class ListarlistaComponent implements OnInit {
   // Atributos para gerar a tabela
   displayedColumns = [ 'numerolista', 'tipo', 'valor', 'dataModificacao', 'situacao', 'criadoPor', 'acao'];
   dataSource: any;

  // Entradas do paginator
  pageSize = 5;
  pageSizeOptions = [ 5, 10, 20, 30 ];

  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  @Input()
  numeroProcesso: string;
  @Input()
  idBanco: number;
  @Input()
  numeroConta: string;

  listalistas: lista[];

  constructor(private listaApiService: listaApiService) { }

  ngOnInit() {
     this.listaApiService.buscarlistasEmAberto(this.numeroProcesso, this.idBanco, this.numeroConta)
      .subscribe(lista => {
        if (lista) {
          this.listalistas = lista;
          this.dataSource = new MatTableDataSource(this.listalistas);
        } else {
           this.dataSource = new MatTableDataSource();
        }

        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;

      }, erro => console.log(erro));

     this.listaApiService.novolistaLista.subscribe(lista => {
        const listaIncluido = {
        idlista: lista.idlista.id,
        numerolista: lista.idlista.numero,
        tipolista: lista.idlista.tipolista,
        valor: lista.idlista.valor,
        situacao: lista.situacao,
        dtHrSituacao: lista.dhlistaDtlheStco,
        nomeEmissor: lista.nomeUsuario,
     };

     this.listalistas.push(listaIncluido);
     this.atualizarTabela();

    });
  }

  atualizarTabela(): void {
      this.dataSource = new MatTableDataSource(this.listalistas);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
  }

  editarlista() {
     // TODO
  }

  copiarlista() {
     // TODO
  }
  cancelarlista() {
     // TODO
  }
}

HTML:

mat-card>
  <mat-header>
      <mat-card-title class="fonte-menor"><h1>Lista de Alvará(s) da Conta</h1></mat-card-title>
      <mat-card-subtitle></mat-card-subtitle>
  </mat-header>
  <mat-card-content>
  <mat-table #table [dataSource]="dataSource" matSort>
     <ng-container matColumnDef="numerolista">
        <mat-header-cell *matHeaderCellDef mat-sort-header><h3>Número da Ordem</h3></mat-header-cell>
        <mat-cell class="fonte-mat-cell" *matCellDef="let lista">{{ lista.numero || '--' }}</mat-cell>
      </ng-container>
      <ng-container matColumnDef="tipo">
         <mat-header-cell *matHeaderCellDef mat-sort-header><h3>Tipo</h3> 
     </mat-header-cell>
        <mat-cell class="fonte-mat-cell" *matCellDef="let lista">{{ lista.tipolista }}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="valor">
    <mat-header-cell *matHeaderCellDef mat-sort-header><h3>Valor</h3></mat-header-cell>
            <mat-cell class="fonte-mat-cell" *matCellDef="let lista">{{ lista.valor | currency: 'R$' }}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="situacao">
        <mat-header-cell *matHeaderCellDef mat-sort-header><h3>Situação</h3></mat-header-cell>
        <mat-cell class="fonte-mat-cell" *matCellDef="let lista">{{ lista.situacao }}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="dataModificacao">
        <mat-header-cell *matHeaderCellDef mat-sort-header><h3>Data da Situação</h3></mat-header-cell>
        <mat-cell class="fonte-mat-cell" *matCellDef="let lista">{{ lista.dtHrSituacao |  date : "dd/MM/yyyy HH:mm" : "GMT" }}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="criadoPor">
        <mat-header-cell *matHeaderCellDef mat-sort-header><h3>Usuário</h3></mat-header-cell>
        <mat-cell class="fonte-mat-cell" *matCellDef="let lista">{{ lista.nomeEmissor }}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="acao">
        <mat-header-cell *matHeaderCellDef class="text-primary" style="color: black"><h3>Ações</h3></mat-header-cell>
        <mat-cell *matCellDef="let lista">
            <button mat-button (click)="editarlista()" title="Editar Alvará">
                <mat-icon>edit</mat-icon>
            </button>
            <button mat-button (click)="copiarlista()" title="Copiar Alvará">
                    <mat-icon>file_copy</mat-icon>
            </button>
            <button mat-button (click)="cancelarlista()" title="Cancelar Alvará">
                    <mat-icon>cancel</mat-icon>
            </button>
        </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
  </mat-table>
  <mat-paginator 
      #paginator
      [pageSize]="pageSize"
      [pageSizeOptions]="pageSizeOptions">
  </mat-paginator>      
</mat-card-content>

Answer 1

I found the solution: the "matColumnDef" should have the same name as the . ts variables - in the example below the "matColumnDef" should be nameEmissor!

Part of the code with error:

 <ng-container matColumnDef="criadoPor">
      <mat-header-cell *matHeaderCellDef mat-sort-header><h3>Usuário</h3></mat-header-cell>
      <mat-cell class="fonte-mat-cell" *matCellDef="let lista">{{ lista.nomeEmissor }}</mat-cell>
 </ng-container>

Part of the corrected code:

 <ng-container matColumnDef="nomeEmissor">
      <mat-header-cell *matHeaderCellDef mat-sort-header><h3>Usuário</h3></mat-header-cell>
      <mat-cell class="fonte-mat-cell" *matCellDef="let lista">{{ lista.nomeEmissor }}</mat-cell>
 </ng-container>

Now everything’s Working!