0

Estou criando uma tabela com mat-table do angular, mais ao exibir as linhas nenhuma informação aparece.

HTML:

<div>
     <mat-table [dataSource]="Contatos">
         <ng-container matColumnDef="ddd">
             <th mat-header-cell *matHeaderCellDef> DDD </th>
             <td mat-cell *matCellDef="let contatoCliente"> {{contatoCliente.Ddd}} </td>
         </ng-container>
         <ng-container matColumnDef="numero">
             <th mat-header-cell *matHeaderCellDef> Número </th>
             <td mat-cell *matCellDef="let contatoCliente"> {{contatoCliente.Numero}} </td>
         </ng-container>
         <ng-container matColumnDef="tipo">
              <th mat-header-cell *matHeaderCellDef> Tipo Contato </th>
              <td mat-cell *matCellDef="let contatoCliente"> {{contatoCliente.Tipo}} </td>
         </ng-container>
                        
         <tr mat-header-row *matHeaderRowDef="['ddd', 'numero', 'tipo']"></tr>
         <tr mat-row *matRowDef="let contatoCliente; columns: ['ddd', 'numero', 'tipo']"></tr>
    </mat-table>
</div>

Modulo:

public cadastrarContato(): void {
    if(!this.ContatosForm.valid)
      return;
    
    let contato: Contato = new Contato();
    Object.assign(contato, this.ContatosForm.value);

    this.Cliente.Contatos.push(contato);

    this.Contatos = new MatTableDataSource(this.Cliente.Contatos);
  }

Quando os dados são adicionados na tela as linhas são criada porem nada é exibido

Minha classe Contato possui os seguintes campos:

export class Contato {
    public Ddd: string;
    public Numero: string;
    public Tipo: TipoContato;
}

Edit:

HTML formulario:

<form [formGroup]="ContatosForm" style="display: flex; flex-flow: row nowrap; width: 100%;" (ngSubmit)="cadastrarContato()">
    <label class="label-contatos">
        * DDD:
        <input class="input-contatos label-ddd" formControlName="ddd" [maxlength]="3">
    </label>
    <label class="label-contatos">
        * Número:
        <input class="input-contatos" formControlName="numero" [maxlength]="9">
    </label>
    <label class="label-contatos">
        * Tipo de contato:
        <select class="input-contatos" formControlName="tipoContato">
            <option *ngFor="let tipoContato of TipoContatos" [value]="tipoContato">{{tipoContato}}</option>
        </select>
    </label>
                    
    <label class="label-contatos input-submit-contato">
        <mat-icon class="icon-submit-contato">add</mat-icon>
        <input type="submit" style="display: none;">
    </label>
</form>

Form group:

this.ContatosForm = this.formBuilder.group({
    ddd: ['047', [Validators.required, Validators.maxLength(3)]],
    numero: ['', [Validators.required, Validators.maxLength(9)]],
    tipoContato: ['Telefone', Validators.required]
});
5
  • 1
    Não dá pra saber não! é um problema local de dificil reprodução
    – novic
    Commented 13/08/2022 às 14:24
  • Pode mostrar como seu Formgroup e html do formulário foi feito? repliquei o que você forneceu de código. e pra mim funcionou
    – Eustáquio
    Commented 15/08/2022 às 14:49
  • Eustáquio, segue o meu form group: this.ContatosForm = this.formBuilder.group({ ddd: ['047', [Validators.required, Validators.maxLength(3)]], numero: ['', [Validators.required, Validators.maxLength(9)]], tipoContato: ['Telefone', Validators.required] }); Commented 15/08/2022 às 21:21
  • vou adicionar no edit pra ficar melhor Commented 15/08/2022 às 21:22
  • Eu tentei replicar com o ngForOf mais acontece o mesmo, eu criei um let contato pro for e se eu tento imprimir ele na tela com um paragrafo ou qualquer outra tag ele não imprimi Commented 15/08/2022 às 21:29

1 Resposta 1

2

Encontrei o erro, o problema era que meu form estava com nomes diferentes da minha classe:

this.ContatosForm = this.formBuilder.group({
      ddd: ['047', [Validators.required, Validators.maxLength(3)]],
      numero: ['', [Validators.required, Validators.maxLength(9)]],
      tipoContato: ['Telefone', Validators.required]
    });

Classe de contato:

export class Contato {
    public Ddd: string;
    public Numero: string;
    public Tipo: TipoContato;
}

E ao fazer o assign ele não preenchia os valores da classe contato e sim criava um novo objeto e sobrescrevia a minha assinatura de tipo Contato

Correção:

export class Contato {
    public Ddd: string;
    public Numero: string;
    public Tipo: TipoContato;
    constructor(ddd: string, numemo: string, tipoContato: TipoContato){
      this.Ddd = ddd;
      this.Numero = numemo;
      this.Tipo = tipoContato;
    }
}
public cadastrarContato(): void {
    if(!this.ContatosForm.valid)
      return;

    this.Cliente.Contatos.push(new Contato(this.ContatosForm.value['ddd'],this.ContatosForm.value['numero'],this.ContatosForm.value['tipoContato']));

    this.Contatos = new MatTableDataSource(this.Cliente.Contatos);
  }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .