1

estoy utilizando Angular 9 con Angular Cli, HTML5 y Bootstrap, tengo una base de datos en MySQL, cree dos tablas en Angular en mi archivo component.html (obtengo la información de mi BD) en el campo Estado guardo diferentes valores como "Activa, Inactiva, Obsoleta, Deshecho", al filtrar con un *ngIf

<tbody *ngFor = "let producto of productos"> 
  <tr *ngIf="producto.estado==='Entregada'"> 

Si me devuelve en una de las tablas todos los productos con el estado Entregado, pero al querer filtrar por dos valores solo me devuelve todos los productos Activos, pero ignora los inactivos, mi código lo tengo de la siguiente forma:

<tbody *ngFor = "let producto of productos">
  <tr *ngIf= "producto.estado==='Activa' && 'Inactiva'">

ya intente colocando || pero tampoco me funciona (en este caso me devuelve todos los productos con cualquier estado

<tr *ngIf= "producto.estado==='Activa' || 'Inactiva'">

Alguien sabe como puedo filtrar para que me devuelva en una tabla los productos Activos e Inactivos?

1 respuesta 1

0

En Javascript/Typescript (y por extensión en las plantillas de Angular), si quieres comparar si una variable es A o B no puedes hacer

if (variable == A || B) ...

Tienes que hacer obligatoriamente

if (variable == A || variable == B) ...

Si estamos trabajando con tipos primitivos (string, number, boolean...), puedes hacer algo como

if ([A, B].includes(variable)) ...

pero en cualquier caso te recomiendo crear un método para filtrar en tu componente

mostrar(producto: Producto): boolean {
  return this.estadosVisibles.includes(producto.estado);
}

donde estadosVisibles es un array con los estados que quieres mostrar. De este modo dejas más limpia la plantilla:

<tr *ngIf= "mostrar(producto)">

Como bola extra analicemos cómo Javascript interpreta lo que has intentado:

let estado ='Activa';


let condicion = estado==='Activa' && 'Inactiva';
console.log(condicion);

¿Qué está pasando aquí? Realmente la interpretación es la siguiente:

let condicion = (estado==='Activa') && 'Inactiva';

Es decir

  1. estado es igual a 'Activa' -> obtenemos un true. Eso nos deja

    let condicion = true && 'Inactiva';
    
  2. La operación A && B se resuelve así:

    • Si A es "falso" (0, null, undefined, "" o false), se devuelve A
    • Si A no es falso, se devuelve B
  3. Por lo que se devuelve 'Inactiva', que a su vez no es "falso", por lo que se acepta la condición.

La operación A || B es similar: Se devuelve el primer elemento si no es "falso", en caso contrario se devuelve B.

0

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.