Angular 2 - Transformer des données
Angular 2 possède de nombreux filtres et tuyaux qui peuvent être utilisés pour transformer des données.
minuscule
Ceci est utilisé pour convertir l'entrée en minuscules.
Syntaxe
Propertyvalue | lowercase
Paramètres
Aucun
Résultat
La valeur de la propriété sera convertie en minuscules.
Exemple
Assurez-vous d'abord que le code suivant est présent dans le fichier app.component.ts.
import {
Component
} from '@angular/core';
@Component ({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
TutorialName: string = 'Angular JS2';
appList: string[] = ["Binding", "Display", "Services"];
}
Ensuite, assurez-vous que le code suivant est présent dans le fichier app / app.component.html.
<div>
The name of this Tutorial is {{TutorialName}}<br>
The first Topic is {{appList[0] | lowercase}}<br>
The second Topic is {{appList[1] | lowercase}}<br>
The third Topic is {{appList[2]| lowercase}}<br>
</div>
Production
Une fois que vous avez enregistré toutes les modifications de code et actualisé le navigateur, vous obtiendrez la sortie suivante.
![](https://post.nghiatu.com/assets/tutorial/angular2/images/lowercase.jpg)
majuscule
Ceci est utilisé pour convertir l'entrée en majuscules.
Syntaxe
Propertyvalue | uppercase
Paramètres
Aucun.
Résultat
La valeur de la propriété sera convertie en majuscules.
Exemple
Assurez-vous d'abord que le code suivant est présent dans le fichier app.component.ts.
import {
Component
} from '@angular/core';
@Component ({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
TutorialName: string = 'Angular JS2';
appList: string[] = ["Binding", "Display", "Services"];
}
Ensuite, assurez-vous que le code suivant est présent dans le fichier app / app.component.html.
<div>
The name of this Tutorial is {{TutorialName}}<br>
The first Topic is {{appList[0] | uppercase }}<br>
The second Topic is {{appList[1] | uppercase }}<br>
The third Topic is {{appList[2]| uppercase }}<br>
</div>
Production
Une fois que vous avez enregistré toutes les modifications de code et actualisé le navigateur, vous obtiendrez la sortie suivante.
![](https://post.nghiatu.com/assets/tutorial/angular2/images/uppercase.jpg)
tranche
Ceci est utilisé pour découper un morceau de données de la chaîne d'entrée.
Syntaxe
Propertyvalue | slice:start:end
Paramètres
start - Il s'agit de la position de départ à partir de laquelle la tranche doit commencer.
end - Il s'agit de la position de départ à partir de laquelle la tranche doit se terminer.
Résultat
La valeur de la propriété sera découpée en fonction des positions de début et de fin.
Exemple
Assurez-vous d'abord que le code suivant est présent dans le fichier app.component.ts
import {
Component
} from '@angular/core';
@Component ({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
TutorialName: string = 'Angular JS2';
appList: string[] = ["Binding", "Display", "Services"];
}
Ensuite, assurez-vous que le code suivant est présent dans le fichier app / app.component.html.
<div>
The name of this Tutorial is {{TutorialName}}<br>
The first Topic is {{appList[0] | slice:1:2}}<br>
The second Topic is {{appList[1] | slice:1:3}}<br>
The third Topic is {{appList[2]| slice:2:3}}<br>
</div>
Production
Une fois que vous avez enregistré toutes les modifications de code et actualisé le navigateur, vous obtiendrez la sortie suivante.
![](https://post.nghiatu.com/assets/tutorial/angular2/images/slice.jpg)
Date
Ceci est utilisé pour convertir la chaîne d'entrée au format de date.
Syntaxe
Propertyvalue | date:”dateformat”
Paramètres
dateformat - Il s'agit du format de date dans lequel la chaîne d'entrée doit être convertie.
Résultat
La valeur de la propriété sera convertie au format de date.
Exemple
Assurez-vous d'abord que le code suivant est présent dans le fichier app.component.ts.
import {
Component
} from '@angular/core';
@Component ({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
newdate = new Date(2016, 3, 15);
}
Ensuite, assurez-vous que le code suivant est présent dans le fichier app / app.component.html.
<div>
The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}<br>
</div>
Production
Une fois que vous avez enregistré toutes les modifications de code et actualisé le navigateur, vous obtiendrez la sortie suivante.
![](https://post.nghiatu.com/assets/tutorial/angular2/images/date.jpg)
devise
Ceci est utilisé pour convertir la chaîne d'entrée au format monétaire.
Syntaxe
Propertyvalue | currency
Paramètres
Aucun.
Résultat
La valeur de la propriété sera convertie au format monétaire.
Exemple
Assurez-vous d'abord que le code suivant est présent dans le fichier app.component.ts.
import {
Component
} from '@angular/core';
@Component ({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
newValue: number = 123;
}
Ensuite, assurez-vous que le code suivant est présent dans le fichier app / app.component.html.
<div>
The currency of this Tutorial is {{newValue | currency}}<br>
</div>
Production
Une fois que vous avez enregistré toutes les modifications de code et actualisé le navigateur, vous obtiendrez la sortie suivante.
![](https://post.nghiatu.com/assets/tutorial/angular2/images/currency.jpg)
pourcentage
Ceci est utilisé pour convertir la chaîne d'entrée au format de pourcentage.
Syntaxe
Propertyvalue | percent
Paramètres
Aucun
Résultat
La valeur de la propriété sera convertie au format pourcentage.
Exemple
Assurez-vous d'abord que le code suivant est présent dans le fichier app.component.ts.
import {
Component
} from '@angular/core';
@Component ({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
newValue: number = 30;
}
Ensuite, assurez-vous que le code suivant est présent dans le fichier app / app.component.html.
<div>
The percentage is {{newValue | percent}}<br>
</div>
Production
Une fois que vous avez enregistré toutes les modifications de code et actualisé le navigateur, vous obtiendrez la sortie suivante.
![](https://post.nghiatu.com/assets/tutorial/angular2/images/percentage.jpg)
Il existe une autre variation du tuyau de pourcentage comme suit.
Syntaxe
Propertyvalue | percent: ‘{minIntegerDigits}.{minFractionDigits}{maxFractionDigits}’
Paramètres
minIntegerDigits - C'est le nombre minimum de chiffres entiers.
minFractionDigits - Il s'agit du nombre minimum de chiffres de fraction.
maxFractionDigits - Il s'agit du nombre maximal de chiffres de fraction.
Résultat
La valeur de la propriété sera convertie au format pourcentage
Exemple
Assurez-vous d'abord que le code suivant est présent dans le fichier app.component.ts.
import {
Component
} from '@angular/core';
@Component ({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
newValue: number = 0.3;
}
Ensuite, assurez-vous que le code suivant est présent dans le fichier app / app.component.html.
<div>
The percentage is {{newValue | percent:'2.2-5'}}<br>
</div>
Production
Une fois que vous avez enregistré toutes les modifications de code et actualisé le navigateur, vous obtiendrez la sortie suivante.
![](https://post.nghiatu.com/assets/tutorial/angular2/images/percent_pipe.jpg)