Angular NgIf

directive

Una directiva estructural que incluye condicionalmente una plantilla basada en el valor de una expresión forzada a booleana. Cuando la expresión se evalúa como true, Angular renderiza la plantilla proporcionada en un then cláusula, y cuando false o null, Angular renderiza la plantilla proporcionada de forma opcional else cláusula. La plantilla predeterminada para el else la cláusula está en blanco.

Ver más…

Exportado de

• CommonModule

Selectores

• [ngIf]

Propiedades

Descripción

Una forma abreviada de la directiva, *ngIf="condition", se utiliza generalmente, siempre como attribute del elemento de anclaje para la plantilla insertada. Angular expande esto en una versión más explícita, en la que el elemento ancla está contenido en un elemento.

Forma simple con sintaxis taquigráfica:

Content to render when condition is true.

Forma simple con sintaxis expandida:

Content to render when condition is
true.

Formulario con un bloque “else”:

Content to render when condition is true.
Content to render when condition is false.

Forma abreviada con bloques “entonces” y “más”:

Content to render when condition is true.
Content to render when condition is false.

Formulario con el almacenamiento del valor localmente:

value
Content to render when value is null.

los *ngIf La directiva se usa más comúnmente para mostrar condicionalmente una plantilla en línea, como se ve en el siguiente ejemplo. El valor por defecto else la plantilla está en blanco.

@Component(
  selector:'ng-if-simple',
  template:`
    show ? 'hide' : 'show'
    show = show
    

    Text to show
`)exportclassNgIfSimple
  show =true;

Mostrando una plantilla alternativa usando else

Para mostrar una plantilla cuando expression evalúa a false, usa un else enlace de plantilla como se muestra en el siguiente ejemplo. los else vinculante apunta a un elemento etiquetado #elseBlock. La plantilla se puede definir en cualquier lugar de la vista del componente, pero normalmente se coloca justo después ngIf para mayor legibilidad.

@Component(
  selector:'ng-if-else',
  template:`
    show ? 'hide' : 'show'
    show = show
    

    Text to show
    Alternate text while primary text is hidden
`)exportclassNgIfElse
  show =true;

Usando un externo then plantilla

En el ejemplo anterior, la plantilla de cláusula-entonces se especifica en línea, como el contenido de la etiqueta que contiene el ngIf directiva. También puede especificar una plantilla que se defina externamente, haciendo referencia a una etiqueta elemento. Al hacer esto, puede cambiar qué plantilla usar en tiempo de ejecución, como se muestra en el siguiente ejemplo.

@Component(
  selector:'ng-if-then-else',
  template:`
    show ? 'hide' : 'show'
    Switch Primary
    show = show
    

    this is ignored
    Primary text to show
    Secondary text to show
    Alternate text while primary text is hidden
`)exportclassNgIfThenElseimplementsOnInitnull=null;
  show =true;@ViewChild('primaryBlock',static:true) primaryBlock: TemplateRef<any>

Almacenar un resultado condicional en una variable

Es posible que desee mostrar un conjunto de propiedades del mismo objeto. Si está esperando datos asincrónicos, el objeto puede no estar definido. En este caso, puede utilizar ngIf y almacenar el resultado de la condición en una variable local como se muestra en el siguiente ejemplo.

@Component(
  selector:'ng-if-as',
  template:`
    Next User
    

    
      Hello user.last, user.first!
    
    Waiting... (user is json)
`)exportclassNgIfAs
  userObservable =newSubject<first:string, last:string>();
  first =['John','Mike','Mary','Bob'];
  firstIndex =0;
  last =['Smith','Novotny','Angular'];
  lastIndex =0;nextUser()let first =this.first[this.firstIndex++];if(this.firstIndex >=this.first.length)this.firstIndex =0;let last =this.last[this.lastIndex++];if(this.lastIndex >=this.last.length)this.lastIndex =0;this.userObservable.next(first, last);

Este código usa solo uno AsyncPipe, por lo que solo se crea una suscripción. La declaración condicional almacena el resultado de userStream|async en la variable local user. A continuación, puede vincular el local user repetidamente.

El condicional muestra los datos solo si userStream devuelve un valor, por lo que no es necesario utilizar el operador de navegación segura (?.) para protegerse contra null valores al acceder a las propiedades. Puede mostrar una plantilla alternativa mientras espera los datos.

Sintaxis taquigráfica

La sintaxis taquigráfica *ngIf se expande en dos especificaciones de plantilla separadas para las cláusulas “then” y “else”. Por ejemplo, considere la siguiente declaración abreviada, que está destinada a mostrar una página de carga mientras espera que se carguen los datos.

 ...



 Loading...

Puede ver que la cláusula “else” hace referencia al con el #loading etiqueta, y la plantilla para la cláusula “entonces” se proporciona como el contenido del elemento de anclaje.

Sin embargo, cuando Angular expande la sintaxis abreviada, crea otra etiqueta, con ngIf y ngIfElse directivas. El elemento de anclaje que contiene la plantilla para la cláusula “entonces” se convierte en el contenido de esta etiqueta sin etiquetar. etiqueta.

 
  ...
 



 Loading...

La presencia del objeto de plantilla implícito tiene implicaciones para el anidamiento de directivas estructurales. Para obtener más información sobre este tema, consulte Directivas estructurales.

Propiedades estáticas

Métodos estáticos