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

saber

3 سال پیش

امتیاز دهید post

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

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

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

حروف کوچک

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

Propertyvalue | lowercase

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

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 وجود دارد.

&lt;div&gt; 
   The name of this Tutorial is {{TutorialName}}&lt;br&gt;  
   The first Topic is {{appList[0] | lowercase}}&lt;br&gt; 
   The second Topic is {{appList[1] | lowercase}}&lt;br&gt; 
   The third Topic is {{appList[2]| lowercase}}&lt;br&gt; 
&lt;/div&gt;

<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

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

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 وجود دارد.

&lt;div&gt; 
   The name of this Tutorial is {{TutorialName}}&lt;br&gt;  
   The first Topic is {{appList[0] | uppercase }}&lt;br&gt; 
   The second Topic is {{appList[1] | uppercase }}&lt;br&gt; 
   The third Topic is {{appList[2]| uppercase }}&lt;br&gt; 
&lt;/div&gt;

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

خروجی

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

Uppercase

برش

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

Propertyvalue | slice:start:end

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

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 وجود دارد.

&lt;div&gt; 
   The name of this Tutorial is {{TutorialName}}&lt;br&gt;  
   The first Topic is {{appList[0] | slice:1:2}}&lt;br&gt; 
   The second Topic is {{appList[1] | slice:1:3}}&lt;br&gt; 
   The third Topic is {{appList[2]| slice:2:3}}&lt;br&gt; 
&lt;/div&gt;

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

خروجی

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

Slice

تاریخ

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

Propertyvalue | date:”dateformat”

1	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); 
}

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 وجود دارد.

&lt;div&gt; 
   The name of this Tutorial is {{TutorialName}}&lt;br&gt;  
   The first Topic is {{appList[0] | slice:1:2}}&lt;br&gt; 
   The second Topic is {{appList[1] | slice:1:3}}&lt;br&gt; 
   The third Topic is {{appList[2]| slice:2:3}}&lt;br&gt; 
&lt;/div&gt;

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

خروجی

&lt;div&gt; 
   The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}&lt;br&gt;  
&lt;/div&gt;

<div>

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

</div>

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

واحد پول

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

Propertyvalue | currency

1	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; 
}

import {

Component

} from '@angular/core';

@Component ({

selector: 'my-app',

templateUrl: 'app/app.component.html'

})

export class AppComponent {

newValue: number = 123;

}

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

&lt;div&gt; 
   The currency of this Tutorial is {{newValue | currency}}&lt;br&gt;      
&lt;/div&gt;

<div>

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

</div>

خروجی

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

درصد

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

Propertyvalue | percent

1	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; 
}

import {

Component

} from '@angular/core';

@Component ({

selector: 'my-app',

templateUrl: 'app/app.component.html'

})

export class AppComponent {

newValue: number = 30;

}

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

&lt;div&gt;
   The percentage is {{newValue | percent}}&lt;br&gt; 
&lt;/div&gt;

<div>

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

</div>

خروجی

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

Percentage

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

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

1	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; 
}

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 وجود دارد.

&lt;div&gt; 
   The percentage is {{newValue | percent:'2.2-5'}}&lt;br&gt;  
&lt;/div&gt;

<div>

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

</div>

خروجی

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

Percent Pipe

منبع.

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

امتیاز دهید post

برچسب ها : آموزش انگولار 2 آموزش طراحی وب سایت

نویسنده مطلب saber

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

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

حروف کوچک

پارامترها

نتیجه

مثال

خروجی

حروف بزرگ

پارامترها

نتیجه

مثال

خروجی

برش

پارامترها

نتیجه

مثال

خروجی

تاریخ

پارامترها

نتیجه

مثال

خروجی

واحد پول

پارامترها

نتیجه

مثال

خروجی

درصد

پارامترها

نتیجه

مثال

خروجی

پارامترها

نتیجه

مثال

خروجی

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

دیدگاه شما

بدون دیدگاه

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

حروف کوچک

پارامترها

نتیجه

مثال

خروجی

حروف بزرگ

پارامترها

نتیجه

مثال

خروجی

برش

پارامترها

نتیجه

مثال

خروجی

تاریخ

پارامترها

نتیجه

مثال

خروجی

واحد پول

پارامترها

نتیجه

مثال

خروجی

درصد

پارامترها

نتیجه

مثال

خروجی

پارامترها

نتیجه

مثال

خروجی

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

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه