Пайп и фильтр Angular 2 — Преобразование данных

Пайп и фильтр Angular 2 — Преобразование данных

От автора: для преобразования данных мы можем использовать pipe и фильтр Angular, причем их довольно много. Приведем примеры.

lowercase

Используется для преобразования введенных символов в строчные буквы. Синтаксис:

Соответствующее значение | lowercase

Параметры: Нет

Результат: Символы будут преобразованы в нижний регистр.

Пример

Сначала убедитесь, что в файле app.component.ts присутствует следующий код.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
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> 

Вывод

После сохранения всех изменений в коде и обновления страницы браузера вы получите следующий результат.

Пайп и фильтр 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 также присутствует такой код.

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

Вывод

После сохранения всех изменений в коде и обновления страницы браузера вы получите следующий результат.

Пайп и фильтр 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 также присутствует такой код.

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

Результат

После сохранения всех изменений в коде и обновления строки браузера вы получите следующий результат.

Пайп и фильтр Angular 2 — Преобразование данных

date

Используется для преобразования входной строки в определенный формат даты. Синтаксис:

Соответствующее значение | date:"dateformat"

Параметры: dateformat — это формат даты, в который должна быть преобразована входная строка.

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

Пример

Сначала убедитесь, что в файле app.component.ts присутствует следующий код.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
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 date of this Tutorial is {{newdate | date:"MM/dd/yy"}}<br> 
</div>

Результат

После сохранения всех изменений в коде и обновления строки браузера вы получите следующий результат.

Пайп и фильтр 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 также присутствует такой код.

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

Результат

После сохранения всех изменений в коде и обновления строки браузера вы получите следующий результат.

Пайп и фильтр 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 также присутствует такой код.

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

Результат

После сохранения всех изменений в коде и обновления строки браузера вы получите следующий результат.

Пайп и фильтр 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 также присутствует такой код.

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

Результат

После сохранения всех изменений кода и обновления страницы браузера вы получите следующий результат.

Пайп и фильтр Angular 2 — Преобразование данных

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree