Angular 2 - transformacja danych

Angular 2 ma wiele filtrów i potoków, których można używać do przekształcania danych.

małe litery

Służy do konwersji danych wejściowych na wszystkie małe litery.

Składnia

Propertyvalue | lowercase

Parametry

Żaden

Wynik

Wartość właściwości zostanie przekonwertowana na małe litery.

Przykład

Najpierw upewnij się, że następujący kod jest obecny w pliku 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"]; 
}

Następnie upewnij się, że następujący kod jest obecny w pliku 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>

Wynik

Po zapisaniu wszystkich zmian w kodzie i odświeżeniu przeglądarki, otrzymasz następujące dane wyjściowe.

duże litery

Służy do konwersji danych wejściowych na wszystkie wielkie litery.

Składnia

Propertyvalue | uppercase

Parametry

Żaden.

Wynik

Wartość właściwości zostanie przekonwertowana na wielkie litery.

Przykład

Najpierw upewnij się, że następujący kod jest obecny w pliku 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"]; 
}

Następnie upewnij się, że następujący kod jest obecny w pliku 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>

Wynik

Po zapisaniu wszystkich zmian w kodzie i odświeżeniu przeglądarki, otrzymasz następujące dane wyjściowe.

plasterek

Służy do wycinania fragmentu danych z ciągu wejściowego.

Składnia

Propertyvalue | slice:start:end

Parametry

start - To jest pozycja początkowa, od której powinien zaczynać się wycinek.
end - To jest pozycja początkowa, od której wycinek powinien się kończyć.

Wynik

Wartość właściwości zostanie podzielona na podstawie pozycji początkowej i końcowej.

Przykład

Najpierw upewnij się, że następujący kod jest obecny w pliku 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"];
}

Następnie upewnij się, że następujący kod jest obecny w pliku 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>

Wynik

Po zapisaniu wszystkich zmian w kodzie i odświeżeniu przeglądarki, otrzymasz następujące dane wyjściowe.

data

Służy do konwersji ciągu wejściowego na format daty.

Składnia

Propertyvalue | date:”dateformat”

Parametry

dateformat - Jest to format daty, na który należy przekonwertować ciąg wejściowy.

Wynik

Wartość właściwości zostanie przekonwertowana na format daty.

Przykład

Najpierw upewnij się, że następujący kod jest obecny w pliku 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); 
}

Następnie upewnij się, że następujący kod jest obecny w pliku app / app.component.html.

<div> 
   The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}<br>  
</div>

Wynik

Po zapisaniu wszystkich zmian w kodzie i odświeżeniu przeglądarki, otrzymasz następujące dane wyjściowe.

waluta

Służy do konwersji ciągu wejściowego na format waluty.

Składnia

Propertyvalue | currency

Parametry

Żaden.

Wynik

Wartość właściwości zostanie przekonwertowana na format walutowy.

Przykład

Najpierw upewnij się, że następujący kod jest obecny w pliku app.component.ts.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 123; 
}

Następnie upewnij się, że następujący kod jest obecny w pliku app / app.component.html.

<div> 
   The currency of this Tutorial is {{newValue | currency}}<br>      
</div>

Wynik

Po zapisaniu wszystkich zmian w kodzie i odświeżeniu przeglądarki, otrzymasz następujące dane wyjściowe.

odsetek

Służy do konwersji ciągu wejściowego na format procentowy.

Składnia

Propertyvalue | percent

Parametry

Żaden

Wynik

Wartość właściwości zostanie przekonwertowana na format procentowy.

Przykład

Najpierw upewnij się, że następujący kod jest obecny w pliku app.component.ts.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 30; 
}

Następnie upewnij się, że następujący kod jest obecny w pliku app / app.component.html.

<div>
   The percentage is {{newValue | percent}}<br> 
</div>

Wynik

Po zapisaniu wszystkich zmian w kodzie i odświeżeniu przeglądarki, otrzymasz następujące dane wyjściowe.

Istnieje inna odmiana potoku procentowego w następujący sposób.

Składnia

Propertyvalue | percent: ‘{minIntegerDigits}.{minFractionDigits}{maxFractionDigits}’

Parametry

minIntegerDigits - To jest minimalna liczba cyfr całkowitych.
minFractionDigits - To jest minimalna liczba cyfr po przecinku.
maxFractionDigits - To jest maksymalna liczba cyfr po przecinku.

Wynik

Wartość właściwości zostanie przekonwertowana na format procentowy

Przykład

Najpierw upewnij się, że następujący kod jest obecny w pliku app.component.ts.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 0.3; 
}

Następnie upewnij się, że następujący kod jest obecny w pliku app / app.component.html.

<div> 
   The percentage is {{newValue | percent:'2.2-5'}}<br>  
</div>

Wynik

Po zapisaniu wszystkich zmian w kodzie i odświeżeniu przeglądarki, otrzymasz następujące dane wyjściowe.