Angular 2 - Verileri Dönüştürme

Angular 2, verileri dönüştürmek için kullanılabilecek çok sayıda filtre ve boruya sahiptir.

küçük harf

Bu, girişi tamamen küçük harfe dönüştürmek için kullanılır.

Sözdizimi

Propertyvalue | lowercase

Parametreler

Yok

Sonuç

Özellik değeri küçük harfe dönüştürülecek.

Misal

Öncelikle app.component.ts dosyasında aşağıdaki kodun bulunduğundan emin olun.

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"]; 
}

Ardından, app / app.component.html dosyasında aşağıdaki kodun bulunduğundan emin olun.

<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>

Çıktı

Tüm kod değişikliklerini kaydettikten ve tarayıcıyı yeniledikten sonra, aşağıdaki çıktıyı alacaksınız.

büyük harf

Bu, girişi tamamen büyük harfe dönüştürmek için kullanılır.

Sözdizimi

Propertyvalue | uppercase

Parametreler

Yok.

Sonuç

Özellik değeri büyük harfe dönüştürülecek.

Misal

Öncelikle app.component.ts dosyasında aşağıdaki kodun bulunduğundan emin olun.

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"]; 
}

Ardından, app / app.component.html dosyasında aşağıdaki kodun bulunduğundan emin olun.

<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>

Çıktı

Tüm kod değişikliklerini kaydettikten ve tarayıcıyı yeniledikten sonra, aşağıdaki çıktıyı alacaksınız.

dilim

Bu, giriş dizesinden bir veri parçasını dilimlemek için kullanılır.

Sözdizimi

Propertyvalue | slice:start:end

Parametreler

start - Bu, dilimin başlaması gereken başlangıç pozisyonudur.
end - Bu, dilimin bitmesi gereken başlangıç pozisyonudur.

Sonuç

Özellik değeri, başlangıç ve bitiş konumlarına göre dilimlenir.

Misal

Öncelikle app.component.ts dosyasında aşağıdaki kodun bulunduğundan emin olun

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"];
}

Ardından, app / app.component.html dosyasında aşağıdaki kodun bulunduğundan emin olun.

<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>

Çıktı

Tüm kod değişikliklerini kaydettikten ve tarayıcıyı yeniledikten sonra, aşağıdaki çıktıyı alacaksınız.

tarih

Bu, girdi dizesini tarih biçimine dönüştürmek için kullanılır.

Sözdizimi

Propertyvalue | date:”dateformat”

Parametreler

dateformat - Bu, giriş dizesinin dönüştürülmesi gereken tarih biçimidir.

Sonuç

Özellik değeri tarih biçimine dönüştürülecektir.

Misal

Öncelikle app.component.ts dosyasında aşağıdaki kodun bulunduğundan emin olun.

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

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

export class AppComponent { 
   newdate = new Date(2016, 3, 15); 
}

Ardından, app / app.component.html dosyasında aşağıdaki kodun bulunduğundan emin olun.

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

Çıktı

Tüm kod değişikliklerini kaydettikten ve tarayıcıyı yeniledikten sonra, aşağıdaki çıktıyı alacaksınız.

para birimi

Bu, girdi dizesini para birimi biçimine dönüştürmek için kullanılır.

Sözdizimi

Propertyvalue | currency

Parametreler

Yok.

Sonuç

Özellik değeri para birimi biçimine dönüştürülecektir.

Misal

Öncelikle app.component.ts dosyasında aşağıdaki kodun bulunduğundan emin olun.

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

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

export class AppComponent { 
   newValue: number = 123; 
}

Ardından, app / app.component.html dosyasında aşağıdaki kodun bulunduğundan emin olun.

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

Çıktı

Tüm kod değişikliklerini kaydettikten ve tarayıcıyı yeniledikten sonra, aşağıdaki çıktıyı alacaksınız.

yüzde

Bu, girdi dizesini yüzde biçimine dönüştürmek için kullanılır.

Sözdizimi

Propertyvalue | percent

Parametreler

Yok

Sonuç

Özellik değeri yüzde biçimine dönüştürülecektir.

Misal

Öncelikle app.component.ts dosyasında aşağıdaki kodun bulunduğundan emin olun.

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

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

export class AppComponent { 
   newValue: number = 30; 
}

Ardından, app / app.component.html dosyasında aşağıdaki kodun bulunduğundan emin olun.

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

Çıktı

Tüm kod değişikliklerini kaydettikten ve tarayıcıyı yeniledikten sonra, aşağıdaki çıktıyı alacaksınız.

Yüzde borusunun başka bir varyasyonu aşağıdaki gibidir.

Sözdizimi

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

Parametreler

minIntegerDigits - Bu, minimum Tamsayı basamak sayısıdır.
minFractionDigits - Bu, minimum kesir basamak sayısıdır.
maxFractionDigits - Bu, maksimum kesir basamak sayısıdır.

Sonuç

Özellik değeri yüzde biçimine dönüştürülecek

Misal

Öncelikle app.component.ts dosyasında aşağıdaki kodun bulunduğundan emin olun.

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

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

export class AppComponent { 
   newValue: number = 0.3; 
}

Ardından, app / app.component.html dosyasında aşağıdaki kodun bulunduğundan emin olun.

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

Çıktı

Tüm kod değişikliklerini kaydettikten ve tarayıcıyı yeniledikten sonra, aşağıdaki çıktıyı alacaksınız.