Трансформация данных

Angular предоставляет мощный механизм для трансформации данных в шаблонах с помощью пайпов (pipes). Пайпы позволяют преобразовывать значения прямо в HTML, минимизируя необходимость дополнительной логики в компонентах.

Основные встроенные пайпы:

  • DatePipe — форматирование дат.

    {{ today | date:'fullDate' }}

    Поддерживает множество форматов, включая 'short', 'medium', 'longDate' и пользовательские строки формата.

  • UpperCasePipe / LowerCasePipe — изменение регистра строк.

    {{ 'angular' | uppercase }} <!-- ANGULAR -->
{{ 'ANGULAR' | lowercase }} <!-- angular -->

  • CurrencyPipe — форматирование чисел как валюты.

    {{ 1234.56 | currency:'USD':'symbol' }}

  • DecimalPipe / PercentPipe — работа с числами и процентами.

    {{ 0.25 | percent }} <!-- 25% -->
{{ 1234.567 | number:'1.2-2' }} <!-- 1,234.57 -->

Создание кастомных пайпов:

Angular позволяет создавать собственные пайпы для специфических задач. Например, фильтрация массива по условию:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'filterBy' })
export class FilterByPipe implements PipeTransform {
  transform(items: any[], field: string, value: any): any[] {
    return items.filter(item => item[field] === value);
  }
}

Использование:

<li *ngFor="let user of users | filterBy:'role':'admin'">{{ user.name }}</li>

Особенности трансформации данных:

  • Пайпы поддерживают чистые (pure) и нечистые (impure) варианты. Чистые вызываются только при изменении входных данных, нечистые — при каждом цикле обнаружения изменений.

  • Для оптимизации производительности рекомендуется использовать чистые пайпы, особенно при работе с массивами и объектами.

  • Комбинация нескольких пайпов позволяет создавать сложные цепочки трансформаций:

    {{ amount | currency:'EUR':'symbol':'1.2-2' | uppercase }}

Интеграция с формами и сервисами:

Пайпы не ограничиваются шаблонами. Их можно использовать в компонентах и сервисах через метод transform, что обеспечивает единообразие логики преобразования данных.

Использование пайпов и временных функций в Angular позволяет создавать как визуально плавные интерфейсы, так и структурированное представление данных, поддерживая чистоту кода и масштабируемость приложений.

Оглавление