Cómo declarar una variable en una plantilla en Angular

El paso a paso o código que encontrarás en este post es la solución más eficiente y efectiva que encontramos a tus dudas o problema.

Solución:

Actualizar

Simplemente podemos crear una directiva como *ngIf y llámalo *ngVar

ng-var.directiva.ts

@Directive(
    selector: '[ngVar]',
)
export class VarDirective 
  @Input()
  set ngVar(context: any) 
    this.context.$implicit = this.context.ngVar = context;
    this.updateView();
  

  context: any = ;

  constructor(private vcRef: ViewContainerRef, private templateRef: TemplateRef) 

  updateView() 
    this.vcRef.clear();
    this.vcRef.createEmbeddedView(this.templateRef, this.context);
  

con este *ngVar directiva podemos usar lo siguiente

       json

o

    variable 

o

    variable 

o

    variable 

Plunker Ejemplo Angular4 ngVar

Ver también

• ¿Dónde define Angular 4 el comportamiento “como local-var” para * ngIf?

respuesta original

Angular v4

1) div + ngIf + let

  variable.a
  variable.b

2) div + ngIf + as

vista

  variable.a
  variable.b
  variable.c

componente.ts

export class AppComponent 
  x = 5;

3) Si no desea crear un envoltorio como div puedes usar ng-container

vista

  variable.a
  variable.b
  variable.c

Como @Keith mencionó en los comentarios

esto funcionará en la mayoría de los casos, pero no es una solución general ya que depende de que la variable sea veraz

Ver actualización para otro enfoque.

Feo, pero:

  a

Cuando se usa con tubería asíncrona:

  a.prop1
  a.prop2

Puede declarar variables en código html usando un template elemento en Angular 2 o ng-template en Angular 4+.

Las plantillas tienen un objeto de contexto cuyas propiedades se pueden asignar a las variables usando let sintaxis vinculante. Tenga en cuenta que debe especificar una salida para la plantilla, pero puede ser una referencia a sí misma.

  

    a
  

Puede reducir la cantidad de código utilizando el $implicit propiedad del objeto de contexto en lugar de una propiedad personalizada.

  

    a
  

El objeto de contexto puede ser un objeto literal o cualquier otra expresión vinculante. Incluso las tuberías parecen funcionar cuando están rodeadas de paréntesis.

Ejemplos válidos de ngTemplateOutletContext:

• [ngTemplateOutletContext]=" aVariable: 123 "
• [ngTemplateOutletContext]=" number:'3.1-5') "
• [ngTemplateOutletContext]=" aVariable: anotherVariable " usar con let-a="aVariable"
• [ngTemplateOutletContext]=" $implicit: anotherVariable " usar con let-a
• [ngTemplateOutletContext]="ctx" donde ctx es una propiedad pública

Te mostramos las comentarios y valoraciones de los usuarios

Si posees alguna desconfianza y forma de avanzar nuestro post te proponemos escribir una crítica y con placer lo estudiaremos.

---

---

Utiliza Nuestro Buscador