От автора: для преобразования данных мы можем использовать pipe и фильтр Angular, причем их довольно много. Приведем примеры.
lowercase
Используется для преобразования введенных символов в строчные буквы. Синтаксис:
|
1 |
Соответствующее значение | lowercase |
Параметры: Нет
Результат: Символы будут преобразованы в нижний регистр.
Пример
Сначала убедитесь, что в файле app.component.ts присутствует следующий код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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 также присутствует такой код.
|
1 2 3 4 5 6 |
<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> |
Вывод
После сохранения всех изменений в коде и обновления страницы браузера вы получите следующий результат.
uppercase
Используется для преобразования вводимых символов в верхний регистр. Синтаксис:
|
1 |
Соответствующее значение | uppercase |
Параметры: Нет.
Результат: Значение свойства будет преобразовано в верхний регистр.
Пример
Сначала убедитесь, что в файле app.component.ts присутствует следующий код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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 также присутствует такой код.
|
1 2 3 4 5 6 |
<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> |
Вывод
После сохранения всех изменений в коде и обновления страницы браузера вы получите следующий результат.
slice
Используется для выбора части данных из вводимой строки. Синтаксис:
|
1 |
Соответствующее значение | slice:start:end |
Параметры
start — это начальная позиция, с которой должен начинаться выбор.
end — это позиция, на которой должен заканчиваться выбор.
Результат: Значение свойства будет выбрано исходя из начального и конечного положения.
Пример
Сначала убедитесь, что в файле app.component.ts присутствует следующий код
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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 также присутствует такой код.
|
1 2 3 4 5 6 |
<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> |
Результат
После сохранения всех изменений в коде и обновления строки браузера вы получите следующий результат.
date
Используется для преобразования входной строки в определенный формат даты. Синтаксис:
|
1 |
Соответствующее значение | date:"dateformat" |
Параметры: dateformat — это формат даты, в который должна быть преобразована входная строка.
Результат: Значение свойства будет преобразовано в формат даты.
Пример
Сначала убедитесь, что в файле app.component.ts присутствует следующий код.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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 также присутствует такой код.
|
1 2 3 |
<div> The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}<br> </div> |
Результат
После сохранения всех изменений в коде и обновления строки браузера вы получите следующий результат.
currency
Используется для преобразования входной строки в формат валюты. Синтаксис:
|
1 |
Соответствующее значение | currency |
Параметры: Нет.
Результат: Значение свойства будет преобразовано в формат валюты.
Пример
Сначала убедитесь, что в файле app.component.ts присутствует следующий код.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', templateUrl: 'app/app.component.html' }) export class AppComponent { newValue: number = 123; } |
Затем убедитесь, что в файле app/app.component.html также присутствует такой код.
|
1 2 3 |
<div> The currency of this Tutorial is {{newValue | currency}}<br> </div> |
Результат
После сохранения всех изменений в коде и обновления строки браузера вы получите следующий результат.
percentage
Используется для преобразования входной строки в процентный формат. Синтаксис:
|
1 |
Соответствующее значение | percent |
Параметры: Нет
Результат: Значение свойства будет преобразовано в процентный формат.
Пример
Сначала убедитесь, что в файле app.component.ts присутствует следующий код.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', templateUrl: 'app/app.component.html' }) export class AppComponent { newValue: number = 30; } |
Затем убедитесь, что в файле app/app.component.html также присутствует такой код.
|
1 2 3 |
<div> The percentage is {{newValue | percent}}<br> </div> |
Результат
После сохранения всех изменений в коде и обновления строки браузера вы получите следующий результат.
Существует еще один вариант преобразования в процентный формат. Синтаксис
|
1 |
Соответствующее значение | percent: '{minIntegerDigits}.{minFractionDigits}{maxFractionDigits}' |
Параметры
minIntegerDigits — это минимальное количество знаков до запятой.
minFractionDigits — это минимальное количество знаков после запятой.
maxFractionDigits — это максимальное количество знаков после запятой.
Результат: Значение свойства будет преобразовано в процентный формат
Пример
Сначала убедитесь, что в файле app.component.ts присутствует следующий код.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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 также присутствует такой код.
|
1 2 3 |
<div> The percentage is {{newValue | percent:'2.2-5'}}<br> </div> |
Результат
После сохранения всех изменений кода и обновления страницы браузера вы получите следующий результат.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
