Estou usando primeng para renderizar dados numa tabela, segue conforme documentação meus dados e minha config de colunas
API {
id: 1,
nome: "Test 1",
moeda: "Euro",
status: "Recebido",
data: "01/01/1999",
}
ngOnInit {
this.col = [
{field: 'nome', header: 'Nome'},
{field: 'moeda', header: 'Moeda'},
{field: 'status', header: 'Status'},
{field: 'data', header: 'Data'}
]
}
Bom, faço um ngFor e renderinzo cada coluna e seus respectivos dados com sucesso
<td *ngFor="let col of column">
{{rowData[col.field]}}
</td>
Agora o problema, para cada coluna de dados na inha tabela preciso formatar de acordo, por exemplo, a coluna Data precisa usar um pipe para formar da data, para outros campos preciso fazer outras alterações, podendo usar pipe.
<td *ngFor="let col of columns | keyvalue">
<ng-container *ngIf="rowData[col.field] !== 'data'"> {{rowData[col.field]}}</ng-container>
<ng-container *ngIf="rowData[col.field] === 'data'"> {{rowData[col.field] | date: 'dd/MMM/yyyy'}}</ng-container>
</td>
Como que eu faço por exemplo nesse contexto acima se eu tiver que também usar pipe de uppercase na coluna nome, ou tiver que usar pipe de currency na coluna moeda como que faço par renderizar tudo isso dentro de um ng-container.
Se for data teria que vir com data formatada, se for nome em uppercase, se for moeda com currency, enfim como faço refactoy desse codigo abaixo?
<td *ngFor="let col of columns | keyvalue">
<ng-container *ngIf="rowData[col.field] !== 'data'"> {{rowData[col.field]}}</ng-container>
<ng-container *ngIf="rowData[col.field] === 'data'"> {{rowData[col.field] | date: 'dd/MMM/yyyy'}}
<ng-container *ngIf="rowData[col.field] !== 'moeda'"> {{rowData[col.field]}}</ng-container>
<ng-container *ngIf="rowData[col.field] === 'moeda'"> {{rowData[col.field] | currency:'CAD':'code'}'}}
<ng-container *ngIf="rowData[col.field] !== 'nome'"> {{rowData[col.field]}}</ng-container>
<ng-container *ngIf="rowData[col.field] === 'nome'"> {{rowData[col.field] | uppercase}}</ng-container>
</td>