0

consulto cómo implementar *ngIf para este caso:

Tengo una variable string construida: varname = "a = 1 && b = 2 && c = 3 && d = 0";

Quiero filtrar una lista con elementos (cards) que tienen las 4 propiedades, a, b, c y d. Propiedades que varían dinámicamente.

Mi pregunta es ¿cómo puedo reemplazar la condición dentro de *ngIf ya que *NO me acepta ngIf = "{{varname}}"

Muchas gracias por la ayuda que me pudieran dar

Ionic:

  ionic (Ionic CLI)             : 4.11.0 (C:\Users\Estelita\AppData\Roaming\npm\node_modules\ionic)
  Ionic Framework               : @ionic/angular 4.11.5
  @angular-devkit/build-angular : 0.801.3
  @angular-devkit/schematics    : 8.1.3
  @angular/cli                  : 8.1.3
  @ionic/angular-toolkit        : 2.1.1

Cordova:

   cordova (Cordova CLI) : 9.0.0 ([email protected])
   Cordova Platforms     : android 8.1.0
   Cordova Plugins       : not available

System:

   Android SDK Tools : 26.1.1 (C:\Android)
   NodeJS            : v12.13.1 (C:\Program Files\nodejs\node.exe)
   npm               : 6.12.1
   OS                : Windows 8.1

2 respuestas 2

0

Hay varias formas de usar la directiva ngIf. La más habitual (y en mi opinión la más práctica) es la siguiente:

<div *ngIf="condicion; else bloqueElse">El contenido de este div se muestra cuando 'condicion' se cumple (true).</div>
<ng-template #bloqueElse>Este contenido se muestra cuando 'condicion' es false.</ng-template>

Tienes más información en la documentación oficial (en inglés).

De todos modos, si tienes cuatro casos diferentes, quizás te resulte más interesante ngSwitch. Se usa así:

<container-element [ngSwitch]="propiedad">
   <div *ngSwitchCase="1">Esto se muestra si 'propiedad===1'</div>
   <div *ngSwitchCase="2">Esto se muestra si 'propiedad===2'</div>
   <div *ngSwitchCase="3">Esto se muestra si 'propiedad===3'</div>
   <div *ngSwitchDefault>Esto se muestra si 'propiedad' tiene otro valor</div>
</container-element>

Más documentación aquí.

2
  • Gracias nezah, pero son 4 propiedades diferentes, no 4 valores diferentes de la misma propiedad
    – Guille
    Commented el 15 ene. 2020 a las 14:07
  • Entiendo. Y la forma de usar el ngIf que detallo al comienzo de la respuesta tampoco te funciona?
    – elnezah
    Commented el 16 ene. 2020 a las 10:26
0

En el ngIf no puedes usar string interpolation pero puedes usar directamente las variables y funciones de tu archivo .ts en el cual está vinculado el html. Ejemplo

ts

varname = a === 1 && b === 2 && c === 3 && d === 0;
isTrue(): boolean {
   return varname;
}

html

<div *ngIf="varname">variable verdadera</div>
<div *ngIf="isTrue()">función retorna verdadero</div>
// También se puede usar las variables para una expresión booleana
<div *ngIf="a === 1 && b === 2 && c === 3 && d === 0">expresión verdadera</div>

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.