Opérateurs d'expression de modèle

Le langage d'expression de modèle utilise un sous-ensemble de syntaxe JavaScript, complété par quelques opérateurs spéciaux pour des scénarios spécifiques. Les sections suivantes couvrent deux de ces opérateurs : opérateur de conduite et opérateur de navigation sécurisée.

L'opérateur de pipe ( | )

Le résultat d'une expression peut nécessiter une transformation avant que vous ne soyez prêt à l'utiliser dans une liaison. Par exemple, vous pouvez afficher un nombre en tant que devise, forcer le texte en majuscule ou filtrer une liste et la trier.

Les pipes Angular sont un bon choix pour les petites transformations de ce type. Les pipes sont des fonctions simples qui acceptent une valeur d'entrée et renvoient une valeur transformée. Ils sont faciles à appliquer dans les expressions de modèles à l'aide de l'opérateur de pipe ( | ) :

L'opérateur de canal passe le résultat d'une expression à gauche à une fonction de canal à droite.

Vous pouvez chaîner des expressions via plusieurs canaux :

Et vous pouvez également appliquer des paramètres à un tuyau :

Le pipe json est particulièrement utile pour le débogage des liaisons :

La sortie générée ressemblerait à ceci

L'opérateur de navigation sûr ( ?. ) Et les chemins de propriétés nuls

L' opérateur de navigation angulaire ( ?. ) est un moyen pratique et fluide de se prémunir contre les valeurs nulles et non définies dans les chemins de propriété. La protection contre une vue rend l'échec si currentHero est null.

Que se passe-t-il lorsque la propriété title liée aux données suivante est null ?

La vue est toujours restituée mais la valeur affichée est vide. Vous voyez seulement "The title is" avec rien après. C'est un comportement raisonnable. Au moins, l'application ne plante pas.

Supposons que l'expression du modèle implique un chemin de propriété, comme dans l'exemple suivant qui affiche le name d'un nullHero.

JavaScript génère une erreur de référence null, ainsi que Angular :

Pire encore, la vue entière disparaît.

Ce serait un comportement raisonnable si la propriété hero ne pouvait jamais être null. Si elle ne doit jamais être null et pourtant, elle est null, c'est une erreur de programmation qui doit être détectée et corrigée. Lancer une exception est la bonne chose à faire.

D'autre part, les valeurs null dans le chemin de la propriété peuvent être correctes de temps en temps, en particulier lorsque les données sont maintenant null et arriveront éventuellement.

En attendant les données, la vue doit être générée sans réclamation et le chemin de la propriété null doit être affiché aussi vierge que la propriété title.

Malheureusement, l'application se bloque lorsque le currentHero est null.

Vous pouvez coder ce problème avec *ngIf.

Vous pouvez essayer de chaîner des parties du chemin de la propriété avec &&, en sachant que l'expression échoue lorsqu'elle rencontre la première valeur null.

Ces approches ont du mérite mais peuvent être lourdes, surtout si le chemin de la propriété est long. Imaginez que vous vous protégiez contre un null quelque part dans un chemin de propriété long tel que a.b.c.d.

L'opérateur de navigation Angular ( ?. ) est un moyen plus fluide et plus pratique de se prémunir contre les valeurs null dans les chemins de propriété. L'expression échoue lorsqu'elle atteint la première valeur null. L'affichage est vide, mais l'application continue à fonctionner sans erreur.

L'opérateur d'assertion non nul ( ! )

A partir de Typescript 2.0, vous pouvez appliquer la vérification de nullité stricte avec strictNullChecks. TypeScript s'assure ensuite qu'aucune variable n'est involontairement null ou undefined.

Dans ce mode, les variables typées interdisent les valeurs null et undefined par défaut. Le vérificateur de type génère une erreur si vous laissez une variable non affectée ou si vous essayez d'affecter la valeur null ou undefined à une variable dont le type interdit les valeurs null ou undefined.

Le vérificateur de type génère également une erreur s'il ne parvient pas à déterminer si une variable sera null ou undefined au moment de l'exécution. Vous savez peut-être que cela ne peut pas arriver, mais le vérificateur de types ne le sait pas. Vous dites au vérificateur de type que cela ne peut pas se produire en appliquant l'opérateur d'assertion post-fix non null ( ! ) .

L'opérateur d'assertion Angular non null ( ! ) remplit le même objectif dans un modèle Angular.

Par exemple, après avoir utilisé *ngIf pour vérifier que hero est défini, vous pouvez affirmer que les propriétés hero sont également définies.

Lorsque le compilateur Angular convertit votre modèle en code TypeScript, il empêche TypeScript de générer des rapports hero.name null ou undefined.

Contrairement à l'opérateur de navigation sécurisée, l'opérateur d'assertion non null ne protège pas contre null ou undefined. Au contraire, il indique au vérificateur de type TypeScript de suspendre les vérifications null strictes pour une expression de propriété spécifique.

Vous aurez besoin de cet opérateur de modèle lorsque vous activez les contrôles de nullité stricts.