파이프를 사용하여 Angular에서 데이터 변환

Angular는 파이프를 사용하여 표시할 값을 변환하는 데 도움이 됩니다. 파이프는 입력 데이터를 원하는 출력으로 변환하는 방법입니다.

나쁜 습관은 성능에 영향을 미치기 때문에 템플릿의 메서드를 사용하여 데이터를 변환하는 것입니다. 파이프를 사용하여 시각화를 위해 일부 데이터를 변환해야 하는 경우.

파이프는 파이프 | 연산자는 왼쪽에서 오른쪽의 파이프 함수로 데이터를 가져오고 변환을 반환하여 템플릿에 표시합니다.

Angular에는 우리를 위한 파이프 목록available이 있으며 사용자 지정 파이프를 생성하여 예상 데이터를 반환할 수도 있습니다.

You can see the final example in stackbliz

통화 파이프 사용.

예를 들어 급여가 있는 직위 목록이 있습니다.

salaryRanges = [
    {
      title: 'developer',
      salary: 90000,
    },
    {
      title: 'nbaPlayer',
      salary: 139883,
    },
    {
      title: 'doctor',
      salary: 72000,
    },
  ];

<ul>
  <li *ngFor="let profesional of salaryRanges">
    {{ profesional.title }}
    {{ profesional.salary }}
  </li>
</ul>

파이프 통화를 사용하여 통화 기호(예: $ 및 소수점)를 표시하려고 합니다. Angular는 기본적으로 USD 형식을 사용합니다.

<ul>
  <li *ngFor="let profesional of salaryRanges">
    {{ profesional.title }}
    {{ profesional.salary | currency }}
  </li>
</ul>

출력은 다음과 같습니다.

developer $90,000.00
nbaPlayer $139,883.00
doctor $72,000.00

아주 좋아요! 해당 금액을 달러 또는 유로로 변환하려는 경우 어떻게 됩니까? 예를 들어, 달러 또는 유로와 같은 다른 사람에게? 각도는 할 일이 없습니까?

맞춤형 파이프를 만들어 봅시다!

사용자 지정 파이프 만들기

Pipe는 PipeTransform 인터페이스를 구현하는 단일 클래스입니다.

우리의 파이프 convertExchange는 값을 가져오고 급여를 55로 나눈 값을 반환합니다.

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

@Pipe({
  name: 'convertExchange'
})
export class ConvertToExchange implements PipeTransform {
  transform(value: any, args?: any): any {
    return value / 55
  }
}

Keep in mind register the Pipe in your module.

중첩된 파이프(예: 통화 및 convertExchange)를 사용할 수 있으므로 파이프가 계산을 수행하고 통화가 형식을 표시합니다.

    {{ profesional.salary | convertToExchange | currency }}

완료! 형식과 전환율이 표시된 돈이 표시됩니다.

developer $1,636.36
nbaPlayer $2,543.33
doctor $1,309.09

우리 파이프는 데이터로 작업을 수행하기 때문에 강력하지만 미래에 USD 또는 EURO와 같은 통화를 약간 유연하게 변경하려는 경우 어떻게 됩니까?

먼저 값이 있는 통화로 개체를 만듭니다.

const currencyValues = {
  USD: 55,
  EURO: 75,
};

다음으로 변환 메서드에 새 매개 변수를 추가하여 통화 이름을 가져오고 통화와 관련된 값을 반환하는 메서드를 만듭니다.

우리의 코드는 다음과 같습니다

import { Pipe, PipeTransform } from '@angular/core';
const currencyValues = {
  USD: 55,
  EURO: 75,
};

@Pipe({
  name: 'convertToExchange'
})
export class ConvertToExchange implements PipeTransform {
  transform(value: any, currency: string): any {
    return value / this.getCurrencyValue(currency);
  }

  getCurrencyValue(currency) {
    return currencyValues[currency] | 1;
  }
}

완벽한! 따라서 구성 요소 템플릿의 매개변수와 함께 파이프를 사용하여 매개변수 use :와 값(이 경우 USD 또는 EURO)을 전달합니다.

convertToExchange는 USD 및 통화 형식, convertToExchange의 출력과 관련된 계산을 수행합니다.

  {{ profesional.salary | convertToExchange: 'USD' | currency }}

최종 출력은 다음과 같습니다.

developer $1,636.36
nbaPlayer $2,543.33
doctor $1,309.09

역동적으로 만드세요

우리는 통화 목록으로 선택을 생성할 수 있으며 사용은 변환을 선택할 수 있습니다.

<select (change)="changeTo($any($event.target).value)">
  <option value="USD">USD</option>
  <option value="EURO">EURO</option>
  <option selected>DOP</option>
</select>

구성 요소에서 새 속성 currentCurrency를 기본값 DOP로 생성합니다. 이 속성은 선택을 변경할 때 업데이트됩니다.

 currentCurrency = 'DOP';
changeTo(currency) {
    this.currentCurrency = currency;
  }

다음으로 템플릿의 currentCurrency를 파이프의 매개변수로 사용합니다.

<li *ngFor="let profesional of salaryRanges">
    {{ profesional.title }}
    {{ profesional.salary | convertToExchange: currentCurrency | currency }}
  </li>

완벽합니다. 드롭다운에서 통화를 선택하면 계산이 다시 수행됩니다!

결론

요컨대 파이프는 매우 강력하여 더 많은 예제와 사용 사례가 있는 공식 Angular 문서에서 자세한 내용을 읽을 수 있습니다.

Learn more about Pipes: https://angular.io/guide/pipes

최종 버전 데모로 플레이할 수 있습니다.
https://stackblitz.com/edit/angular-ivy-opaevp?file=src%2Fapp%2Fapp.component.html

사진 제공: T K on Unsplash