tudo bem ?
Não estou conseguindo fazer a ordenação da tabela, quando clico na tabela nada acontece... alguém consegue ajudar ?
Código abaixo:
<div class="container">
<mat-card class="form-add-template">
<mat-card-header>
<h1>Templates</h1>
</mat-card-header>
<mat-divider></mat-divider>
<mat-card-actions>
<mat-form-field class="input-search">
<input matInput placeholder="Pesquisar">
</mat-form-field>
<button mat-raised-button color="primary" (click)="todo()">Novo Template</button>
</mat-card-actions>
</mat-card>
<mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>
<ng-container matColumnDef="descricao">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Descrição </th>
<td mat-cell *matCellDef="let element"> {{element.descricao}} </td>
</ng-container>
<ng-container matColumnDef="tag">
<th mat-header-cell *matHeaderCellDef mat-sort-header="tag"> TAG </th>
<td mat-cell *matCellDef="let element"> {{element.tag}} </td>
</ng-container>
<ng-container matColumnDef="conteudo">
<th mat-header-cell *matHeaderCellDef> Conteúdo </th>
<td mat-cell *matCellDef="let element"> {{element.conteudo}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</mat-table>
<mat-paginator [length]="100"
[pageSize]="10"
[pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>
</div>
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { TemplateService } from '../template.service';
import { Data } from '../template.model';
import { MatSort, MatTableDataSource, MatPaginator } from '@angular/material';
@Component({
selector: 'app-list-template',
templateUrl: './list-template.component.html',
styleUrls: ['./list-template.component.css']
})
export class ListTemplateComponent implements OnInit {
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
@ViewChild(MatSort, {static: true}) sort: MatSort;
@ViewChild('filter', {static: true}) filter: ElementRef;
constructor(
private templateService: TemplateService
) { }
templates: Data;
dataSource: any;
displayedColumns: string[] = ['descricao', 'tag', 'conteudo'];
ngOnInit() {
this.getTemplates();
}
getTemplates() {
this.templateService.getTemplates().subscribe((data: Data) => {
this.dataSource = new MatTableDataSource();
this.dataSource = data;
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
}
}
código da classe de serviço:
export class TemplateService {
constructor(private http: HttpClient) { }
getTemplates() {
return this.http.get(`${API_SANDBOX_BASE_URL}/templates`);
}
}
Estrutura do model:
export interface Template {
id: string;
descricao: string;
tag: string;
conteudo: string;
status: number;
}
export interface Data {
template: Template[];
}