Від автора: для перетворення даних ми можемо використовувати 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 first Topic is {{appList[0] | lowercase}}
The second Topic is {{appList[1] | lowercase}}
The third Topic is {{appList[2]| lowercase}}
Висновок
Після збереження всіх змін в коді оновлення сторінки браузера ви отримаєте наступний результат.
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 first Topic is {{appList[0] | uppercase }}
The second Topic is {{appList[1] | uppercase }}
The third Topic is {{appList[2]| uppercase }}
Висновок
Після збереження всіх змін в коді оновлення сторінки браузера ви отримаєте наступний результат.
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 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}}
Результат
Після збереження всіх змін в коді і оновлення рядка браузера ви отримаєте наступний результат.
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 також присутній такий код.
Результат
Після збереження всіх змін в коді і оновлення рядка браузера ви отримаєте наступний результат.
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 також присутній такий код.
Результат
Після збереження всіх змін в коді і оновлення рядка браузера ви отримаєте наступний результат.
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 також присутній такий код.
Результат
Після збереження всіх змін в коді і оновлення рядка браузера ви отримаєте наступний результат.
Існує ще один варіант перетворення в відсотковий формат. Синтаксис
Відповідне значення | 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 також присутній такий код.
Результат
Після збереження всіх змін коду оновлення сторінки браузера ви отримаєте наступний результат.
