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

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

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

lowercase

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

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

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

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

Узнать подробнее

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

Пример

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

Затем убедитесь, что в файле app/app.component.html также присутствует такой код.

Вывод

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

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

uppercase

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

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

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

Пример

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

Затем убедитесь, что в файле app/app.component.html также присутствует такой код.

Вывод

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

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

slice

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

Параметры

start — это начальная позиция, с которой должен начинаться выбор.

end — это позиция, на которой должен заканчиваться выбор.

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

Пример

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

Затем убедитесь, что в файле app/app.component.html также присутствует такой код.

Результат

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

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

date

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

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

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

Пример

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

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

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

Узнать подробнее

Затем убедитесь, что в файле app/app.component.html также присутствует такой код.

Результат

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

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

currency

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

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

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

Пример

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

Затем убедитесь, что в файле app/app.component.html также присутствует такой код.

Результат

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

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

percentage

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

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

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

Пример

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

Затем убедитесь, что в файле app/app.component.html также присутствует такой код.

Результат

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

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

Существует еще один вариант преобразования в процентный формат. Синтаксис

Параметры

minIntegerDigits — это минимальное количество знаков до запятой.

minFractionDigits — это минимальное количество знаков после запятой.

maxFractionDigits — это максимальное количество знаков после запятой.

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

Пример

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

Затем убедитесь, что в файле app/app.component.html также присутствует такой код.

Результат

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

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

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

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

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

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

Узнать подробнее

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

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

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree