آموزش تبدیل داده ها در انگولار ۲

آموزش تبدیل داده ها در انگولار ۲

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش تبدیل داده ها در انگولار ۲ خواهیم پرداخت.

انگولار ۲ دارای فیلترهای زیادی است که می توان از آنها برای تبدیل داده ها استفاده کرد.

 

حروف کوچک

این برای تبدیل ورودی به همه حروف کوچک استفاده می شود.

Propertyvalue | lowercase 

 

پارامترها 

None

نتیجه

مقدار ویژگی به حروف کوچک تبدیل می شود.

مثال

ابتدا مطمئن شوید که کد زیر در فایل 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"]; 
}

 

در مرحله بعد مطمئن شوید که کد زیر در فایل 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>

 

خروجی

هنگامی که همه تغییرات کد را ذخیره کرده و مرورگر را تازه کردید، خروجی زیر را دریافت خواهید کرد.

 

حروف بزرگ

این برای تبدیل ورودی به همه حروف بزرگ استفاده می شود.

Propertyvalue | uppercase 

 

پارامترها 

None

نتیجه

مقدار ویژگی به حروف بزرگ تبدیل می شود.

مثال

ابتدا اطمینان حاصل کنید که کد زیر در فایل 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"]; 
}

 

در مرحله بعد، مطمئن شوید که کد زیر در فایل 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>

 

خروجی

هنگامی که همه تغییرات کد را ذخیره کرده و مرورگر را تازه کردید، خروجی زیر را دریافت خواهید کرد.

برش

این مورد برای برش بخشی از داده ها از رشته ورودی استفاده می شود.

Propertyvalue | slice:start:end 

 

پارامترها 

• start – این موقعیت شروع از جایی است که باید برش شروع شود.
• end – این موقعیت شروع از جایی است که برش باید پایان یابد.

نتیجه

مقدار ویژگی بر اساس موقعیت های شروع و پایان تقسیم می شود.

مثال

ابتدا اطمینان حاصل کنید که کد زیر در فایل 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"];
}

 

در مرحله بعد مطمئن شوید که کد زیر در فایل 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>

 

خروجی

هنگامی که همه تغییرات کد را ذخیره کرده و مرورگر را تازه کردید، خروجی زیر را دریافت خواهید کرد.

تاریخ

این برای تبدیل رشته ورودی به قالب تاریخ استفاده می شود.

Propertyvalue | date:”dateformat” 

 

پارامترها 

• dateformat – این قالب تاریخ است که رشته ورودی باید به آن تبدیل شود.

نتیجه

مقدار ویژگی به قالب تاریخ تبدیل می شود.

مثال

ابتدا مطمئن شوید که کد زیر در فایل 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); 
}

 

در مرحله بعد مطمئن شوید که کد زیر در فایل 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>

 

خروجی

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

 

هنگامی که همه تغییرات کد را ذخیره کرده و مرورگر را تازه کردید ، خروجی زیر را دریافت خواهید کرد.

واحد پول

این برای تبدیل رشته ورودی به قالب ارز استفاده می شود.

Propertyvalue | currency 

 

پارامترها 

None.

نتیجه

مقدار ویژگی به قالب ارز تبدیل می شود.

مثال

ابتدا اطمینان حاصل کنید که کد زیر در فایل app.component.ts وجود دارد.

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

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

export class AppComponent { 
   newValue: number = 123; 
}

 

در مرحله بعد مطمئن شوید که کد زیر در فایل app/app.component.html وجود دارد.

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

 

خروجی

هنگامی که همه تغییرات کد را ذخیره کرده و مرورگر را تازه کردید، خروجی زیر را دریافت خواهید کرد.

درصد

این برای تبدیل رشته ورودی به فرمت درصد استفاده می شود.

Propertyvalue | percent 

 

پارامترها 

None.

نتیجه

مقدار ویژگی به قالب درصد تبدیل می شود.

مثال

ابتدا مطمئن شوید که کد زیر در فایل app.component.ts وجود دارد.

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

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

export class AppComponent { 
   newValue: number = 30; 
}

 

در مرحله بعد مطمئن شوید که کد زیر در فایل app/app.component.html وجود دارد.

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

 

خروجی

هنگامی که همه تغییرات کد را ذخیره کرده و مرورگر را تازه کردید ، خروجی زیر را دریافت خواهید کرد.

تنوع دیگری از درصد لوله به شرح زیر وجود دارد.

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

 

پارامترها 

• minIntegerDigits – این حداقل تعداد ارقام صحیح است.
• minFractionDigits – این حداقل تعداد رقم کسر است.
• maxFractionDigits – این حداکثر تعداد رقم کسر است.

نتیجه

مقدار ویژگی به قالب درصد تبدیل می شود

مثال

ابتدا مطمئن شوید که کد زیر در فایل app.component.ts وجود دارد.

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

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

export class AppComponent { 
   newValue: number = 0.3; 
}

 

در مرحله بعد مطمئن شوید که کد زیر در فایل app/app.component.html وجود دارد.

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

 

خروجی

هنگامی که همه تغییرات کد را ذخیره کرده و مرورگر را تازه کردید، خروجی زیر را دریافت خواهید کرد.

 

منبع.

 

لیست جلسات قبل آموزش آنگولار ۲

1. آموزش انگولار ۲
2.  مرور کلی آنگولار ۲
3. آموزش محیط انگولار ۲ 
4. آموزش Hello World در انگولار ۲
5. آموزش ماژول ها در انگولار ۲
6. آموزش معماری در انگولار ۲
7. آموزش کامپوننت ها در انگولار ۲
8. آموزش قالب ها در انگولار ۲
9. آموزش دستورالعمل ها در انگولار ۲
10. آموزش متادیتا در انگولار ۲
11. آموزش اتصال داده ها در انگولار ۲
12. آموزش عملیات CRUD با استفاده از HTTP در انگولار ۲
13. آموزش مدیریت خطا در انگولار ۲
14. آموزش مسیریابی در انگولار ۲
15. آموزش ناوبری در انگولار ۲
16. آموزش فرم ها در انگولار ۲
17. آموزش CLI در انگولار ۲
18. آموزش تزریق وابستگی در انگولار ۲
19. آموزش پیکربندی پیشرفته در انگولار ۲
20. آموزش کنترل های شخص ثالث در انگولار ۲
21. آموزش نمایش داده ها در انگولار ۲
22. آموزش مدیریت رویدادها در انگولار ۲