Alright? I have a problem when it comes to displaying the data in the material table, nothing appears ...
If I change the tag:
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
by
<table mat-table [dataSource]="menu" matSort class="mat-elevation-z8">
It works, but Sorting and filter do not work.
Could you help me if possible?
About us
I'm following this guide:
https://material.angular.io/components/table/overview#getting-started
About us
Here are the files I'm working on:
products.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { MenuService } from 'src/app/pdv/menu/menu.service';
import { Menu } from 'src/app/model/Menu';
import { LoadingService } from 'src/app/loading/loading.service';
import { MatSort, MatTableDataSource } from '@angular/material';
@Component({
selector: 'app-products',
templateUrl: './products.component.html',
styleUrls: ['./products.component.scss'],
providers: [ MenuService , LoadingService]
})
export class ProductsComponent implements OnInit {
columnsToDisplay: string[] = ['id', 'photo', 'name', 'value', 'measure'];
public menu: Menu[];
dataSource = new MatTableDataSource(this.menu);
@ViewChild(MatSort) sort: MatSort;
constructor(private menuService: MenuService, private loadingService: LoadingService) { }
ngOnInit() {
this.getMenu();
this.dataSource.sort = this.sort;
console.log(this.dataSource);
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
getMenu() {
this.loadingService.initializeLoading(1);
this.menuService.getMenu().subscribe(menu => {
this.menu = menu;
this.loadingService.finalizeLoading();
}, error => {
console.log('Não foi possível dar o método getMenu()');
});
}
}products.component.html
<div class='adm-body'>
<div class='title'>
Produtos
</div>
<div class='container-fluid'>
<div class='row'>
<div class='col-12 col-sm-12 col-md-12 col-lg-12'>
<div class='card'>
<div class="row">
<div class='col-12 col-sm-12 col-md-3 col-lg-3 form-container'>
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Busca">
</mat-form-field>
</div>
</div>
<div class='row'>
<div class='col-12 col-sm-12 col-md-9 col-lg-9'>
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let menu"> {{menu.id}} </td>
</ng-container>
<ng-container matColumnDef="photo">
<th mat-header-cell *matHeaderCellDef mat-sort-header> FOTO </th>
<td mat-cell *matCellDef="let menu">
<img [src]="menu.photo" width="50px">
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> NOME </th>
<td mat-cell *matCellDef="let menu">
<a href="">{{menu.name}}</a>
</td>
</ng-container>
<ng-container matColumnDef="value">
<th mat-header-cell *matHeaderCellDef mat-sort-header> VALOR </th>
<td mat-cell *matCellDef="let menu"> {{menu.value | currency:'BRL':'symbol':minFractionDigits}} </td>
</ng-container>
<ng-container matColumnDef="measure">
<th mat-header-cell *matHeaderCellDef mat-sort-header> MEDIDA </th>
<td mat-cell *matCellDef="let menu"> {{menu.measure}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let myRowData; columns: columnsToDisplay"></tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>and my getMenu on services is like this
getMenu(): Observable<any> {
let body = {
'estabId': environment.establishment
};
return this.http.post<any>(environment.apiUrl + 'getItensByEstab', body, {
headers: {
'x-access-token': this.loginService.getToken(),
'Content-Type': 'application/json'
}
});
}