Angular ngFor add conditional usnado ng-content

Asked

Viewed 66 times

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!

  • Why not create a method in the component that returns the data in the correct format and just call it directly ?

  • @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!

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.