Angular 2 - Trasformazione dei dati

Angular 2 ha molti filtri e pipe che possono essere utilizzati per trasformare i dati.

minuscolo

Viene utilizzato per convertire l'input in tutto minuscolo.

Sintassi

Propertyvalue | lowercase

Parametri

Nessuna

Risultato

Il valore della proprietà verrà convertito in minuscolo.

Esempio

Innanzitutto assicurati che il seguente codice sia presente nel file 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"]; 
}

Successivamente, assicurati che il seguente codice sia presente nel file 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>

Produzione

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.

maiuscolo

Viene utilizzato per convertire l'input in tutto maiuscolo.

Sintassi

Propertyvalue | uppercase

Parametri

Nessuna.

Risultato

Il valore della proprietà verrà convertito in maiuscolo.

Esempio

Innanzitutto assicurati che il seguente codice sia presente nel file 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"]; 
}

Successivamente, assicurati che il seguente codice sia presente nel file 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>

Produzione

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.

fetta

Viene utilizzato per tagliare un pezzo di dati dalla stringa di input.

Sintassi

Propertyvalue | slice:start:end

Parametri

  • start - Questa è la posizione di partenza da cui dovrebbe iniziare la fetta.

  • end - Questa è la posizione di partenza da dove dovrebbe finire la fetta.

Risultato

Il valore della proprietà verrà suddiviso in base alle posizioni iniziale e finale.

Esempio

Innanzitutto assicurati che il seguente codice sia presente nel file 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"];
}

Successivamente, assicurati che il seguente codice sia presente nel file 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>

Produzione

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.

Data

Viene utilizzato per convertire la stringa di input in formato data.

Sintassi

Propertyvalue | date:”dateformat”

Parametri

dateformat - Questo è il formato della data in cui la stringa di input deve essere convertita.

Risultato

Il valore della proprietà verrà convertito nel formato della data.

Esempio

Innanzitutto assicurati che il seguente codice sia presente nel file 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); 
}

Successivamente, assicurati che il seguente codice sia presente nel file app / app.component.html.

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

Produzione

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.

moneta

Viene utilizzato per convertire la stringa di input in formato valuta.

Sintassi

Propertyvalue | currency

Parametri

Nessuna.

Risultato

Il valore della proprietà verrà convertito nel formato valuta.

Esempio

Innanzitutto assicurati che il seguente codice sia presente nel file app.component.ts.

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

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

export class AppComponent { 
   newValue: number = 123; 
}

Successivamente, assicurati che il seguente codice sia presente nel file app / app.component.html.

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

Produzione

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.

percentuale

Viene utilizzato per convertire la stringa di input in formato percentuale.

Sintassi

Propertyvalue | percent

Parametri

Nessuna

Risultato

Il valore della proprietà verrà convertito in formato percentuale.

Esempio

Innanzitutto assicurati che il seguente codice sia presente nel file app.component.ts.

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

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

export class AppComponent { 
   newValue: number = 30; 
}

Successivamente, assicurati che il seguente codice sia presente nel file app / app.component.html.

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

Produzione

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.

C'è un'altra variazione del tubo percentuale come segue.

Sintassi

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

Parametri

  • minIntegerDigits - Questo è il numero minimo di cifre intere.

  • minFractionDigits - Questo è il numero minimo di cifre frazionarie.

  • maxFractionDigits - Questo è il numero massimo di cifre frazionarie.

Risultato

Il valore della proprietà verrà convertito in formato percentuale

Esempio

Innanzitutto assicurati che il seguente codice sia presente nel file app.component.ts.

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

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

export class AppComponent { 
   newValue: number = 0.3; 
}

Successivamente, assicurati che il seguente codice sia presente nel file app / app.component.html.

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

Produzione

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.