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