Пайп і фільтр Angular 2 — Перетворення даних

19

Від автора: для перетворення даних ми можемо використовувати pipe і фільтр Angular, причому їх досить багато. Наведемо приклади.

lowercase

Використовується для перетворення введених символів в малі літери. Синтаксис:

Відповідне значення | lowercase

Параметри: Немає

Результат: Символи перетворюються в нижній регістр.

Приклад

Спочатку переконайтеся, що у файлі 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 також присутній такий код.

The name of this Tutorial is {{TutorialName}}
The first Topic is {{appList[0] | lowercase}}
The second Topic is {{appList[1] | lowercase}}
The third Topic is {{appList[2]| lowercase}}

Висновок

Після збереження всіх змін в коді оновлення сторінки браузера ви отримаєте наступний результат.

Пайп і фільтр Angular 2 — Перетворення даних

uppercase

Використовується для перетворення символів у верхній регістр. Синтаксис:

Відповідне значення | uppercase

Параметри: Немає.

Результат: Значення властивості буде перетворено у верхній регістр.

Приклад

Спочатку переконайтеся, що у файлі 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 також присутній такий код.

The name of this Tutorial is {{TutorialName}}
The first Topic is {{appList[0] | uppercase }}
The second Topic is {{appList[1] | uppercase }}
The third Topic is {{appList[2]| uppercase }}

Висновок

Після збереження всіх змін в коді оновлення сторінки браузера ви отримаєте наступний результат.

Пайп і фільтр Angular 2 — Перетворення даних

slice

Використовується для вибору частини даних з поточного рядка. Синтаксис:

Відповідне значення | 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 також присутній такий код.

The name of this Tutorial is {{TutorialName}}
The first Topic is {{appList[0] | slice:1:2}}
The second Topic is {{appList[1] | slice:1:3}}
The third Topic is {{appList[2]| slice:2:3}}

Результат

Після збереження всіх змін в коді і оновлення рядка браузера ви отримаєте наступний результат.

Пайп і фільтр Angular 2 — Перетворення даних

date

Використовується для перетворення вхідний рядки в певний формат дати. Синтаксис:

Відповідне значення | 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 також присутній такий код.

The date of this Tutorial is {{newdate | date:»MM/dd/yy»}}

Результат

Після збереження всіх змін в коді і оновлення рядка браузера ви отримаєте наступний результат.

Пайп і фільтр Angular 2 — Перетворення даних

currency

Використовується для перетворення вхідний рядки у формат валюти. Синтаксис:

Відповідне значення | currency

Параметри: Немає.

Результат: Значення властивості буде перетворено у формат валюти.

Приклад

Спочатку переконайтеся, що у файлі 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 також присутній такий код.

The currency of this Tutorial is {{newValue | currency}}

Результат

Після збереження всіх змін в коді і оновлення рядка браузера ви отримаєте наступний результат.

Пайп і фільтр Angular 2 — Перетворення даних

percentage

Використовується для перетворення вхідний рядки в відсотковий формат. Синтаксис:

Відповідне значення | percent

Параметри: Немає

Результат: Значення властивості буде перетворено в відсотковий формат.

Приклад

Спочатку переконайтеся, що у файлі 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 також присутній такий код.

The percentage is {{newValue | percent}}

Результат

Після збереження всіх змін в коді і оновлення рядка браузера ви отримаєте наступний результат.

Пайп і фільтр Angular 2 — Перетворення даних

Існує ще один варіант перетворення в відсотковий формат. Синтаксис

Відповідне значення | 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 також присутній такий код.

The percentage is {{newValue | percent:’2.2-5′}}

Результат

Після збереження всіх змін коду оновлення сторінки браузера ви отримаєте наступний результат.

Пайп і фільтр Angular 2 — Перетворення даних