À propos de l'utilisation de l'opérateur de canalisation (|) dans Angular-js tutoriel-php.cn

À propos de l'utilisation de l'opérateur de canalisation (|) dans Angular

亚连

Libérer： 2018-06-20 15:54:14

original

2857 Les gens l'ont consulté

Habituellement, nous devons utiliser des tubes pour formater les données. L'article suivant présente principalement comment utiliser l'opérateur de tube (|) dans Angular. L'article le présente en détail à travers un exemple de code. Les amis qui en ont besoin peuvent, pour référence, apprendre. avec l'éditeur ci-dessous.

Qu'est-ce qu'un pipeline ?

Le pipeline d'Angular peut être considéré comme un outil de formatage et d'affichage des données. Les tuyaux peuvent formater les données à afficher sans modifier les données source. Par exemple, concernant l'affichage des dates, vous pouvez utiliser le Pipeline 1 pour afficher les données sources sous la forme aaaa/MM/jj, ou vous pouvez utiliser le Pipeline 2 pour les afficher sous la forme du 28 février 2017. Mais les données originales sont toujours d’actualité et n’ont pas changé. À l'aide de pipelines, nous pouvons séparer le contenu du formatage des données et le rendre indépendant lorsque le formatage et l'affichage sont nécessaires, il suffit de sélectionner le pipeline correspondant pour le traitement.

1. Opérateurs d'expression de modèle

Le langage d'expression de modèle utilise un sous-ensemble de la syntaxe JavaScript et ajoute plusieurs opérateurs spéciaux supplémentaires pour des scénarios spécifiques : exploitants de pipelines, opérateurs de navigation sécuritaire.

2. Opérateur de canal (|)

Le résultat de l'expression peut nécessiter une conversion avant la liaison. Par exemple, vous souhaiterez peut-être afficher les nombres sous forme de montants, forcer le texte à être en majuscules ou filtrer et trier une liste.

Les objets tuyaux angulaires sont un choix pratique pour les petites transformations comme celle-ci.

Un tuyau est une fonction simple qui accepte une valeur d'entrée et renvoie le résultat de la transformation.

Fonctions de tube intégrées couramment utilisées dans Angular :

DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipi, PercentPipe, JsonPipe, etc.

Ils sont utilisés dans les expressions de modèle, utilisez simplement l'opérateur pipe (|) .

Utilisation

L'opérateur pipe transmettra le résultat de l'expression sur son côté gauche à la fonction pipe sur son côté droit. Les expressions peuvent également être concaténées via plusieurs canaux.

<p> 
 Title through a pipe chain: 
 {{title | uppercase | lowercase}} 
</p>

Copier après la connexion

Exemples courants :

<p class="alert alert-warning"> 
 <p>{{title|uppercase }}</p> 
 <p>{{title|uppercase|lowercase }}</p> 
 <p>{{this|json}}</p> 
 <p>{{time|date:&#39;yyyy-MM-dd&#39;}}</p> 
 <p>{{number|percent}}</p> 
 <p>{{number|currency:&#39;CNY&#39;}}</p> 
</p>

Copier après la connexion

Attributs ts :

export class AppComponent { 
 title = &#39;app&#39;; 
 name = &#39;张三丰&#39;; 
 time = new Date(); 
 number = 1.123; 
 show(str: string) { 
 str += &#39;---测试&#39;; 
 return str; 
 } 
}

Copier après la connexion

Afficher les résultats :

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.