Angular 2 - Transformación de datos

Angular 2 tiene muchos filtros y tuberías que se pueden usar para transformar datos.

minúscula

Esto se utiliza para convertir la entrada a minúsculas.

Sintaxis

Propertyvalue | lowercase

Parámetros

Ninguna

Resultado

El valor de la propiedad se convertirá a minúsculas.

Ejemplo

Primero asegúrese de que el siguiente código esté presente en el archivo 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"]; 
}

A continuación, asegúrese de que el siguiente código esté presente en el archivo 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>

Salida

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

mayúsculas

Esto se usa para convertir la entrada a mayúsculas.

Sintaxis

Propertyvalue | uppercase

Parámetros

Ninguna.

Resultado

El valor de la propiedad se convertirá a mayúsculas.

Ejemplo

Primero asegúrese de que el siguiente código esté presente en el archivo 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"]; 
}

A continuación, asegúrese de que el siguiente código esté presente en el archivo 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>

Salida

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

rebanada

Esto se usa para cortar un fragmento de datos de la cadena de entrada.

Sintaxis

Propertyvalue | slice:start:end

Parámetros

start - Esta es la posición inicial desde donde debe comenzar el corte.
end - Esta es la posición inicial desde donde debe terminar el corte.

Resultado

El valor de la propiedad se dividirá en función de las posiciones inicial y final.

Ejemplo

Primero asegúrese de que el siguiente código esté presente en el archivo 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"];
}

A continuación, asegúrese de que el siguiente código esté presente en el archivo 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>

Salida

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

fecha

Se utiliza para convertir la cadena de entrada al formato de fecha.

Sintaxis

Propertyvalue | date:”dateformat”

Parámetros

dateformat - Este es el formato de fecha al que se debe convertir la cadena de entrada.

Resultado

El valor de la propiedad se convertirá al formato de fecha.

Ejemplo

Primero asegúrese de que el siguiente código esté presente en el archivo 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); 
}

A continuación, asegúrese de que el siguiente código esté presente en el archivo app / app.component.html.

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

Salida

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

moneda

Se utiliza para convertir la cadena de entrada a formato de moneda.

Sintaxis

Propertyvalue | currency

Parámetros

Ninguna.

Resultado

El valor de la propiedad se convertirá a formato de moneda.

Ejemplo

Primero asegúrese de que el siguiente código esté presente en el archivo app.component.ts.

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

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

export class AppComponent { 
   newValue: number = 123; 
}

A continuación, asegúrese de que el siguiente código esté presente en el archivo app / app.component.html.

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

Salida

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

porcentaje

Se utiliza para convertir la cadena de entrada a formato de porcentaje.

Sintaxis

Propertyvalue | percent

Parámetros

Ninguna

Resultado

El valor de la propiedad se convertirá a formato de porcentaje.

Ejemplo

Primero asegúrese de que el siguiente código esté presente en el archivo app.component.ts.

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

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

export class AppComponent { 
   newValue: number = 30; 
}

A continuación, asegúrese de que el siguiente código esté presente en el archivo app / app.component.html.

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

Salida

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

Hay otra variación de la tubería de porcentaje como sigue.

Sintaxis

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

Parámetros

minIntegerDigits - Este es el número mínimo de dígitos enteros.
minFractionDigits - Este es el número mínimo de dígitos fraccionarios.
maxFractionDigits - Este es el número máximo de dígitos fraccionarios.

Resultado

El valor de la propiedad se convertirá a formato de porcentaje

Ejemplo

Primero asegúrese de que el siguiente código esté presente en el archivo app.component.ts.

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

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

export class AppComponent { 
   newValue: number = 0.3; 
}

A continuación, asegúrese de que el siguiente código esté presente en el archivo app / app.component.html.

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

Salida

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

↰ Previous page Next page ↱