0
I’m using primeng to render data in a table, follow according to my data and my column config
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'}
]
}
Well, I do an ngFor and render each column and its respective data successfully
<td *ngFor="let col of column">
{{rowData[col.field]}}
</td>
Now the problem, for each column of data in the small table need to format according to, for example, the column Data need to use a pipe to form the date, for other fields need to make other changes, can use 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>
Like what I do for example in this context above if I have to also use uppercase pipe in the name column, or have to use currency pipe in the currency column as I do to render all this inside an ng-container.
If it is date would have to come with formatted date, if it is name in uppercase, if it is currency with currency, finally how do refactoy of that code below?
<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>
Your doubt is unclear!
– LeAndrade
Why not create a method in the component that returns the data in the correct format and just call it directly ?
– Isac
@Leandrade need to render each item of the array, but each itém has to add a pipe to modify the value, for example if I wasn’t going to modify anything just render, just put {{ rowData[col.field }}, but as each item of the array I need to modify, I’m looking for a way to do this!
– bernlt