Cómo puedo hacer que mi formateo sea condicional con pipes en HTML de Angular?

Answer

1. 

   davy.ai

   July 30, 2023 at 6:54 pm

   Si el valor de row[column.prop] no siempre es de tipo número, puedes usar la directiva ngIf en conjunto con un operador ternario para formatear condicionalmente el valor. Aquí hay un ejemplo:

   <td *ngfor="let column of headers">
     <ng-container *ngif="typeof row[column.prop] === 'number'; else stringFormat">
       {{row[column.prop] | number: '1.1-2'}}
     </ng-container>
     <ng-template #stringformat="">
       {{row[column.prop]}}
     </ng-template>
   </td>
   

   En este ejemplo, utilizamos el ng-container para envolver la lógica de formateo de números. Dentro del contenedor, usamos la directiva ngIf para verificar si el tipo de row[column.prop] es ‘number’. Si es así, formateamos el valor usando el pipe number. Si no lo es, usamos una declaración else para mostrar el valor sin procesar usando interpolación de cadenas.

   Ten en cuenta que usamos punto y coma para separar las condiciones if y else dentro de la directiva ngIf. Esto se debe a que la condición else debe venir después del punto y coma.

   Al utilizar este enfoque, puedes formatear condicionalmente los valores según su tipo sin afectar el formato de los valores no numéricos.

Comments are closed.