Comment déclarer une variable dans un template en Angular

Question

J'ai le modèle suivant :

  {{aVariable}}

et je voudrais obtenir :

  {{a}}

Y a-t-il un moyen de le faire ?

Answer 1

Mise à jour

Nous pouvons simplement créer une directive comme *ngIf et l'appeler *ngVar

ng-var.directive.ts

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

        if (!this.hasView) {
            this.vcRef.createEmbeddedView(this.templateRef, this.context);
            this.hasView = true;
        }
    }

    private context: {
        $implicit: unknown;
        ngVar: unknown;
    } = {
        $implicit: null,
        ngVar: null,
    };

    private hasView: boolean = false;

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

Avec cette directive *ngVar nous pouvons utiliser ce qui suit

      {{variable | json}}

ou

    {{variable | json}}

ou

    {{variable | json}}

ou

    {{variable | json}}

Exemple Plunker Angular4 ngVar

Voir aussi

• Où Angular 4 définit-il le comportement "comme variable locale" pour *ngIf?

Réponse originale

Angular v4

1. div + ngIf + let

   {{variable.a}} {{variable.b}}

2. div + ngIf + as

vue

  {{variable.a}}
  {{variable.b}}
  {{variable.c}}

component.ts

export class AppComponent {
  x = 5;
}

3. Si vous ne voulez pas créer de wrapper comme div vous pouvez utiliser ng-container

vue

  {{variable.a}}
  {{variable.b}}
  {{variable.c}}

Comme @Keith l'a mentionné dans les commentaires

Cela fonctionnera dans la plupart des cas mais ce n'est pas une solution générale car elle repose sur la vérité de la variable

Voir la mise à jour pour une autre approche.

Answer 2

Vous pouvez déclarer des variables dans le code html en utilisant un élément template dans Angular 2 ou ng-template dans Angular 4+.

Les modèles ont un objet de contexte dont les propriétés peuvent être assignées à des variables en utilisant la syntaxe de liaison let. Notez que vous devez spécifier une sortie pour le modèle, mais cela peut être une référence à lui-même.

    {{a}}

Vous pouvez réduire la quantité de code en utilisant la propriété $implicit de l'objet de contexte au lieu d'une propriété personnalisée.

    {{a}}

L'objet de contexte peut être un objet littéral ou toute autre expression de liaison. Autres exemples valides:

Answer 3

Laide, mais:

  {{a}}

Lorsqu'il est utilisé avec le tuyau async:

  {{a.prop1}}
  {{a.prop2}}

Answer 4

mise à jour 3

Le problème https://github.com/angular/angular/issues/2451 est corrigé dans Angular 4.0.0

Voir aussi

• https://github.com/angular/angular/pull/13297
• https://github.com/angular/angular/commit/b4db73d
• https://github.com/angular/angular/issues/13061

mise à jour 2

Ceci n'est pas pris en charge.

Il existe des variables de modèle mais il n'est pas possible d'assigner des valeurs arbitraires. Elles ne peuvent être utilisées que pour faire référence aux éléments auxquels elles sont appliquées, aux noms exportés des directives ou des composants et aux variables de portée pour les directives structurelles comme ngFor,

Voir aussi https://github.com/angular/angular/issues/2451

Mise à jour 1

@Directive({
  selector: '[var]',
  exportAs: 'var'
})
class VarDirective {
  @Input() var:any;
}

et l'initialiser comme ceci

ou

et utiliser la variable comme ceci

{{aVariable.var}}

(non testé)

• #aVariable crée une référence à la VarDirective (exportAs: 'var')
• var="abc" instancie la VarDirective et passe la valeur de chaîne "abc" à son entrée de valeur.
• aVariable.var lit la valeur assignée à l'entrée var de la directive var.

Answer 5

Voici une directive que j'ai écrite qui étend l'utilisation du paramètre de décoration exportAs, et vous permet d'utiliser un dictionnaire comme variable locale.

import { Directive, Input } from "@angular/core";
@Directive({
    selector:"[localVariables]",
    exportAs:"localVariables"
})
export class LocalVariables {
    @Input("localVariables") set localVariables( struct: any ) {
        if ( typeof struct === "object" ) {
            for( var variableName in struct ) {
                this[variableName] = struct[variableName];
            }
        }
    }
    constructor( ) {
    }
}

Vous pouvez l'utiliser comme suit dans un modèle:

   a = {{local.a}}
   b = {{local.b}}
   c = {{local.c}}

Bien sûr, #local peut être n'importe quel nom de variable locale valide.