I am unable to perform the grid in the html <mat-table>

Question

Formulario.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { MatTableDataSource } from '@angular/material/table';
import { ActivatedRoute, Router } from '@angular/router';
import { ComumComponente } from 'app/core/comum/comum.component';
import { MensagemModel } from 'app/core/model/error.model';
import { EmpresaMarketPlacesGradeModel, IEmpresaMarketPlacesGradeModel } from 'app/entities/enidades/empresa.market.places-grade.model';
import { IEmpresaMarketPlacesIncluirModel } from 'app/entities/entidades/empresa.market.places-incluir.model';
import { IMarketPlacesModel } from 'app/entities/marketplaces/model/marketplaces.model';
import { MarketplacesService } from 'app/entities/marketplaces/service/marketplaces.service';
import { SnackBarComponent } from 'app/shared/snack-bar/snack-bar.component';
import { Validacoes } from 'app/shared/util/validator';
import { IEmpresaModel } from '../model/empresa.model';
import { EmpresaService } from '../service/empresa.service';

@Component({
  selector: 'jhi-empresa-form',
  templateUrl: './empresa-form.component.html'
})
export class EmpresaFormComponent extends ComumComponente implements OnInit {
  id: string;
  excluido: boolean;
  incluir: boolean;
  marketPlaces: IMarketPlacesModel[];
  marketPlacesGrade: IEmpresaMarketPlacesGradeModel[];
  dataSource: MatTableDataSource<IEmpresaMarketPlacesGradeModel> = new MatTableDataSource();
  displayedColumns: string[] = ['marketPlaces', 'porcentagem', 'alterar', 'excluir'];
  // empresaMarketPlacesForm
  empresaMarketPlacesForm = this.fb.group({
    percentual: ['', [
      Validators.required,
    ]],
    marketplaces: ['', [
      Validators.required,
    ]],
  });
  // Formulario principal
  empresaForm = this.fb.group({
    id: [''],
    // Empresa
    nome: ['', [
      Validators.required,
     Validators.maxLength(255),
    ]],
    cnpj: ['', [
      Validators.required,
      Validators.minLength(18),
      Validators.maxLength(18),
      Validacoes.isValidCnpj,
    ]],
    telefoneEmpresa: ['', [
      Validators.maxLength(14),
    ]],
    emailEmpresa: ['', [
      Validators.required,
      Validators.email,
      Validators.maxLength(255),
    ]],
    // Responsavel
    nomeResponsavel: ['', [
      Validators.required,
      Validators.maxLength(255),
    ]],
    telefoneResponsavel: ['', [
      Validators.maxLength(14),
    ]],
    celularResponsavel: ['', [
      Validators.maxLength(15),
    ]],
    emailResponsavel: ['', [
      Validators.required,
      Validators.email,
      Validators.maxLength(255),
    ]],
  });
  constructor(
    public snackBar: SnackBarComponent,
    private fb: FormBuilder,
    private router: Router,
    private empresaService: EmpresaService,
    private marketplacesService: MarketplacesService,
    private routaAtual: ActivatedRoute,
  ) {
    super(snackBar);
    this.marketPlaces = [];
    this.id = '';
    this.excluido = false;
    this.incluir = true;
    this.marketPlacesGrade = [];
    this.dataSource = new MatTableDataSource(this.marketPlacesGrade);
  }
  ngOnInit(): void {
    this.preencherMarketsPlaces();
    this.buscarPorId();
  }
 limpar(): void {
    this.limparEmpresaMarketPlacesForm();
    if(this.id === '' || this.id === null || this.id === undefined) {
      this.empresaForm.reset();
    } else {
      this.buscarPorId();
    }
  }
  voltar(): void {
    this.router.navigate(['/empresa']);
  }
  salvar(): void {
  }
  adicionarMarketPlaces(): void {
    const errorMessage = new MensagemModel();
    const errorMessages: Array<MensagemModel> = [];
    if (this.empresaMarketPlacesForm.invalid) {
      if (!this.empresaMarketPlacesForm.controls.percentual?.valid) {
        errorMessage.texto = 'Percentual é obrigatório. Só aceita número, uma virgula e até 2 casas decimais !';
        errorMessages.push(errorMessage);
        super.mensagemTela('ERROR', errorMessages);
        return;
      }
      if (!this.empresaMarketPlacesForm.controls.marketplaces?.valid) {
        errorMessage.texto = 'Marketplace é obrigatório !';
        errorMessages.push(errorMessage);
        super.mensagemTela('ERROR', errorMessages);
        return;
      }
    }
    const emmkpg = new EmpresaMarketPlacesGradeModel();
    const marketplaces = this.empresaMarketPlacesForm.controls.marketplaces.value;
    emmkpg.idMarketPlaces = marketplaces.id; 
    emmkpg.marketPlacesNome = marketplaces.nome; 
    emmkpg.porcentagem = this.empresaMarketPlacesForm.controls.percentual.value;
    this.marketPlacesGrade.push(emmkpg);
    this.dataSource.data.push(emmkpg);
    this.limparEmpresaMarketPlacesForm();
  }
  private buscarPorId(): void {
    const rotaAtalMomento = String(this.routaAtual.snapshot.url[0].path);
    this.incluir = true;
    if(rotaAtalMomento !== 'incluir') {
      this.incluir = false;
      this.id = rotaAtalMomento;
      this.excluido = false;
      this.empresaService.buscarPorId(rotaAtalMomento).subscribe(
        entidade => {
          if(entidade?.body !== null) {
            this.updateForm(entidade?.body);
            if(entidade.body.statusDoRegistro?.key === 'EXCLUIDO') {
              this.excluido = true;
            }
          }
        },
        (error: any) => {
          super.mostrarError(error);
        }
      );
    }
  }
  private preencherMarketsPlaces(): void {
    this.marketPlaces = [];
    this.marketplacesService.buscarTodos().subscribe(
      marketPlaces => {
        this.marketPlaces = marketPlaces;
      },
      (error: any) => {
        super.mensagemTela('ERROR', error);
      }
    );
  }
  private updateForm(empresa: IEmpresaModel): void {
    this.empresaForm.patchValue({
      id: empresa.id,
      nome: empresa.nome,
      cnpj: empresa.cnpj,
      telefoneEmpresa: empresa.telefoneEmpresa,
      emailEmpresa: empresa.emailEmpresa,
      nomeResponsavel: empresa.nomeResponsavel,
      telefoneResponsavel: empresa.telefoneResponsavel,
      celularResponsavel: empresa.celularResponsavel,
      emailResponsavel: empresa.emailResponsavel,
    });
  }
  private limparEmpresaMarketPlacesForm(): void {
    this.empresaMarketPlacesForm.reset();
  }
}

html form.

<div fxLayout="row" fxLayoutWrap="wrap">
    <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
        <mat-card>
            <mat-card-header>
                <mat-card-title *ngIf="incluir" jhiTranslate="empresa.titulo.incluir"></mat-card-title>
                <mat-card-title *ngIf="!incluir" jhiTranslate="empresa.titulo.alterar"></mat-card-title>
            </mat-card-header>
            <mat-card-content>
                <mat-tab-group>
                    <form [formGroup]="empresaForm">
                        <input formControlName="id" name="id" formControlName="id" type="hidden" />
                        <mat-tab label="{{ 'empresa.abas.um' | translate }}">
                            <br/>
                            <div>
                                <div fxLayout="row" fxFlex="30" fxLayoutAlign="start start">
                                    <mat-form-field>
                                        <input matInput placeholder="{{ 'empresa.nome' | translate }}"
                                            id="nome" formControlName="nome" name="nome" maxlength="255"
                                            required />
                                    </mat-form-field>
                                </div>
                            </div>
                            <div>
                                <div fxLayout="row" fxFlex="30" fxLayoutAlign="start start">
                                    <mat-form-field>
                                        <input matInput placeholder="{{ 'empresa.cnpj' | translate }}" 
                                            id="cnpj" formControlName="cnpj" name="cnpj" 
                                            [textMask]="{mask: cnpj}" required />
                                    </mat-form-field>
                                </div>
                            </div>
                            <div>
                                <div fxLayout="row" fxFlex="30" fxLayoutAlign="start start">
                                    <mat-form-field>
                                        <input matInput placeholder="{{ 'empresa.telefone.empresa' | translate }}" 
                                            id="telefoneEmpresa" formControlName="telefoneEmpresa" 
                                            name="telefoneEmpresa" [textMask]="{mask: telefone}" />
                                    </mat-form-field>
                                </div>
                            </div>
                            <div>
                                <div fxLayout="row" fxFlex="30" fxLayoutAlign="start start">
                                    <mat-form-field>
                                        <input matInput placeholder="{{ 'empresa.email.empresa' | translate }}" 
                                            id="emailEmpresa" formControlName="emailEmpresa" name="emailEmpresa" 
                                            maxlength="255" required />
                                    </mat-form-field>
                                </div>
                            </div>
                        </mat-tab>
                        <mat-tab label="{{ 'empresa.abas.dois' | translate }}">
                            <br/>
                            <div>
                                <div fxLayout="row" fxFlex="30" fxLayoutAlign="start start">
                                    <mat-form-field>
                                        <input matInput placeholder="{{ 'empresa.nome.responsavel' | translate }}" 
                                            id="nomeResponsavel" formControlName="nomeResponsavel" name="nomeResponsavel" 
                                            maxlength="255" required />
                                    </mat-form-field>
                                </div>
                            </div>
                            <div>
                                <div fxLayout="row" fxFlex="30" fxLayoutAlign="start start">
                                    <mat-form-field>
                                        <input matInput placeholder="{{ 'empresa.telefone.responsavel' | translate }}" 
                                            id="telefoneResponsavel" formControlName="telefoneResponsavel" 
                                            name="telefoneResponsavel" [textMask]="{mask: telefone}" />
                                    </mat-form-field>
                                </div>
                            </div>
                            <div>
                                <div fxLayout="row" fxFlex="30" fxLayoutAlign="start start">
                                    <mat-form-field>
                                        <input matInput placeholder="{{ 'empresa.telefone.celular' | translate }}" 
                                            id="celularResponsavel" formControlName="celularResponsavel" 
                                            name="celularResponsavel" [textMask]="{mask: celular}" />
                                    </mat-form-field>
                                </div>
                            </div>
                            <div>
                                <div fxLayout="row" fxFlex="30" fxLayoutAlign="start start">
                                    <mat-form-field>
                                        <input matInput placeholder="{{ 'empresa.email.responsavel' | translate }}" 
                                            id="emailResponsavel" formControlName="emailResponsavel" 
                                            name="emailResponsavel" maxlength="255" required />
                                    </mat-form-field>
                                </div>
                            </div>
                        </mat-tab>
                    </form>
                    <form [formGroup]="empresaMarketPlacesForm">
                        <mat-tab label="{{ 'empresa.abas.tres' | translate }}">
                            <br/>
                            <div>
                                <div fxLayout="row" fxFlex="20" fxLayoutAlign="start start">
                                    <mat-form-field>
                                        <input matInput placeholder="{{ 'empresa.percentual' | translate }}" 
                                            id="percentual" formControlName="percentual" name="percentual"
                                            pattern="^\d+(,\d{1,2})?$" >
                                    </mat-form-field>
                                </div>
                                <div fxLayout="row" fxFlex="20" fxFlexOffset="1" fxLayoutAlign="start start">
                                    <mat-form-field>
                                        <mat-label jhiTranslate="empresa.marketplaces.nome"></mat-label>
                                        <mat-select id="marketplaces" formControlName="marketplaces" 
                                            name="marketplaces" >
                                            <mat-option></mat-option>
                                            <mat-option *ngFor="let marketPlace of marketPlaces" 
                                                [value]="marketPlace">
                                                {{marketPlace.nome}}
                                            </mat-option>
                                        </mat-select>
                                    </mat-form-field>
                                </div>
                                <div fxLayout="row" fxFlex="20" fxFlexOffset="1" fxLayoutAlign="start start">
                                    <button *ngIf="!excluido" mat-mini-fab type="button" 
                                        matTooltip="{{ 'empresa.marketplaces.adicionar' | translate }}" 
                                        mat-fab color="primary" mat-card-icon class="shadow-none" 
                                        (click)="adicionarMarketPlaces()">
                                        <mat-icon>add</mat-icon>
                                    </button>
                                </div>
                            </div>
                            <div>
                                <div>
                                    <mat-table [dataSource]="dataSource">
                                        <ng-container matColumnDef="marketPlaces">
                                            <mat-header-cell *matHeaderCellDef>
                                                {{ 'empresa.marketplaces.nome' | translate }}
                                            </mat-header-cell>
                                            <mat-cell *matCellDef="let element"> {{element.nome}} </mat-cell>
                                        </ng-container>
                                        <ng-container matColumnDef="porcentagem">
                                            <mat-header-cell *matHeaderCellDef> {{ 'empresa.percentual' | translate }} </mat-header-cell>
                                            <mat-cell *matCellDef="let element"> {{element.nome}} </mat-cell>
                                        </ng-container>
                                        <ng-container matColumnDef="alterar">
                                            <mat-header-cell *matHeaderCellDef></mat-header-cell>
                                            <mat-cell *matCellDef="let element"> {{element.nome}} </mat-cell>
                                        </ng-container>
                                        <ng-container matColumnDef="excluir">
                                            <mat-header-cell *matHeaderCellDef></mat-header-cell>
                                            <mat-cell *matCellDef="let element"> {{element.nome}} </mat-cell>
                                        </ng-container>
                                        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                                        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
                                    </mat-table>
                                </div>
                            </div>
                            <br>
                        </mat-tab>
                    </form>
                </mat-tab-group>
                <h6 class="text-danger m-t-0 m-b-10" jhiTranslate="geral.campos.obrigatorios"></h6>
                <button *ngIf="!excluido" mat-mini-fab type="button" matTooltip="{{ 'geral.salvar' | translate }}"
                    mat-fab color="primary" mat-card-icon class="shadow-none" (click)="salvar()">
                    <mat-icon>save</mat-icon>
                </button>&nbsp;
                <button *ngIf="!excluido" mat-mini-fab type="button" matTooltip="{{ 'geral.limpar' | translate }}" 
                    mat-fab color="primary" mat-card-icon class="shadow-none" (click)="limpar()">
                    <mat-icon>clear_all</mat-icon>
                </button>&nbsp;
                <button mat-mini-fab type="button" matTooltip="{{ 'geral.voltar' | translate }}" 
                    mat-fab color="primary" mat-card-icon class="shadow-none" (click)="voltar()">
                    <mat-icon>backspace</mat-icon>
                </button>
            </mat-card-content>
        </mat-card>
    </div>
</div>

In the method add(), it correctly adds both in the array this.marketPlacesGrade.push(emmkpg); and this.dataSource.data.push(emmkpg);.

But does not update the table in html.

I tried so: <mat-table [dataSource]="dataSource"> and <mat-table [dataSource]="marketPlacesGrade">.

What can it be ?

Answer 1

Young, in your file . ts declare the variable datasource as a Mattablesource object, thus:

import { MatTableDataSource } from '@angular/material';

export class SeuComponente implements OnInit {

    constructor(){ ... }
    ....
    dataSource = new MatTableDataSource<any>();
    ....

}

in the method where Voce assigns the value to the datasource, so assign:

this.dataSource.data = suaArray

Finally in html

<mat-table [dataSource]="dataSource">

Try it this way.