Table in Angular Material, problem with string interpolation

-1

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'
      }
    });
  }
    
asked by anonymous 22.12.2018 / 02:10

0 answers