Currently, I am utilizing Angular material table in my project, but I am having trouble displaying the dataSource content on the screen. Below is the snippet of code I am working with:
In my evento-table.component.ts file, I have data being requested from the server:
dataSource: EventoTableDataSource;
eventos: Array<any> = new Array();
constructor(private eventosService: EventosService) { }
displayedColumns = ['pais', 'regiao', 'sensor', 'timestampDt', 'valor', 'status'];
ngOnInit() {
this.listarEventos();
this.dataSource = new EventoTableDataSource();
console.log('dataSource', this.dataSource);
}
ngAfterViewInit() {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
this.table.dataSource = this.dataSource;
}
listarEventos() {
this.eventosService.listarEventos().subscribe(eventos => {
this.dataSource.data = eventos;
return eventos;
});
}
}
Now, the challenge I am facing is how to utilize the dataSource in order to display the data on my view:
Here is the content of evento-table-datasource.ts file:
// TODO: replace this with real data from your application
const EVENTOS: EventoTableItem[] = [{
id: 1,
pais: 'Brasil',
regiao: 'Sudeste',
sensor: '001',
valor: 3000,
status: 'Processado',
timestampDt: '2019-06-19T00:00:00Z'
}];
export class EventoTableDataSource extends DataSource<EventoTableItem> {
data: EventoTableItem[] = EVENTOS;
paginator: MatPaginator;
sort: MatSort;
constructor() {
super();
}
connect(): Observable<EventoTableItem[]> {
const dataMutations = [
observableOf(this.data),
this.paginator.page,
this.sort.sortChange
];
return merge(...dataMutations).pipe(map(() => {
return this.getPagedData(this.getSortedData([...this.data]));
}));
}
disconnect() {}
...
}
Lastly, here is how I have set up my table visualization:
<table mat-table [dataSource]="eventos" class="full-width-table" matSort aria-label="Elements">