0
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>
I found the solution: the "matColumnDef" must have the same name as the variables that come from the . ts - example:
– Alex Sandro