1

Tengo unos datos que me traigo de la Base de Datos que son los siguientes:

Estado
0
-1
1
2

El cual necesito convertir el campo ESTADO

0: Creado
-1 : Cancelado
1 : Aprobado
2: Finalizado 

Este es mi código:

<div class="card obtenido"  *ngFor="let viaje of viaje.viaje">
    <div class="card-body">
        <h5 class="card-title">{{viaje.id}}</h5>
        <li>{{viaje.fecha}} </li>
        <li>{{viaje.ciudadNombre}} </li>
        <li [ngSwitch]="Estado">{{viaje.estado}} </li>
        <a href="#" class="btn btn-outline-danger">Cancelar</a>
    </div>             
</div>

3 respuestas 3

2

Segun Angular no deberias usar metodos en la plantilla. Una forma elegante de hacerlo es utilizando un pipe.

Creas un nuevo componente format-status.pipe.ts con el contenido:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'formatStatus'
})
export class FormatStatusPipe implements PipeTransform {
    transform(value: String): String {
        if(value==='0'){
            return 'creado';
        } else if(...){
        }
    }
}

Lo declaras en app.modules.ts

y lo utilizas en tu componente

{{viaje.estado | formatStatus}}
2
  • excelente respuesta, pero tienes un pequeño detalle , el value es de tipo string y despues haces value===0, es decir nunca sera cero Commented el 2 sept. 2019 a las 14:42
  • @JackNavaRow Tienes razón, gracias, respuesta editada Commented el 2 sept. 2019 a las 14:55
1

Puedes crear una función para que tome el valor viaje.estado y retorne el texto que necesitas así por ejemplo:

checkValue(data){
    switch(data){
      case 0:
        return "Opcion 1";
        break;
      case 1:
        return "Opcion 2"
        break;
      //etc...
    }
}

y en la vista cambiar tu li a

<li>{{ checkValue(viaje.estado) }} </li>
8
  • Gracias PRO MAQUINA ME sirvio demasiado Commented el 2 sept. 2019 a las 13:38
  • Bro otra pregunta Tengo un campo tipo date como hago para que me traiga solo la fecha que coloco el me esta trayendo asi la fecha 2019-01-11T00:00:00 Commented el 2 sept. 2019 a las 13:39
  • usa datepipe de angualar aca la documentación angular.io/api/common/DatePipe
    – DavElsanto
    Commented el 2 sept. 2019 a las 13:40
  • para tu caso seria algo así { viaje.fecha | 'shortDate' }
    – DavElsanto
    Commented el 2 sept. 2019 a las 13:41
  • Es una respuesta valida pero no te acostumbres a usar métodos en la plantilla, en vez de estos utiliza pipes: blog.appverse.io/… Commented el 2 sept. 2019 a las 13:42
1

lo ideal es que definas unas constantes para esos valores y luego al Traer el resultado te retorne el string , dejo un ejemplo:

const estados = ["Creado", "Aprobado", "Finalizado" ,"Cancelado"]

function obtenerEstado (i){
return i >=0 ? estados[i] : estados[3]


}
console.log("Creado?", obtenerEstado(0))
console.log("Aprobado?", obtenerEstado(1))

console.log("FInalizado?", obtenerEstado(2))
console.log("Cancelado?", obtenerEstado(-1))

Esta respuesta no usa un for , por lo tanto la eficiencia es la ideal O(n)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.