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]
});