{% raw %}{{ ponies }}{% endraw %}
``` 운이 좋으면 \[object object]가 표시 될 것이다. 하지만 JsonPipe는 우리를 구하기 위해 여기에 있고 어떤 식 으로든 HTML에서 사용할 수 있다. ```markup{% raw %}{{ ponies | json }}{% endraw %}
``` 그리고 그것은 개체의 JSON 표현을 표시한다. ```markup[ { "name": "Rainbow Dash" }, { "name": "Pinkie Pie" } ]
``` 파이프를 사용하려면 데이터 다음에 파이프 (|) 문자를 추가 한 다음 사용할 파이프의 이름을 추가해야 한다. 표현식이 평가되고 결과가 파이프를 통과할것이다. 여러 파이프를 차례로 연결할 수 있다. ```markup{% raw %}{{ ponies | slice:0:2 | json }}{% endraw %}
``` 우리는 슬라이스 파이프로 돌아갈 것이지만 슬라이스 파이프를 연결 한 다음 json을 연결하는 것을 볼 수 있다. " "보간 표현식이나 속성 표현식에서는 사용할 수 있지만 이벤트 문에서는 사용할 수 없다. ```markup ``` 의존성 삽입을 통해 코드에서 사용할 수도 있다. ```javascript import { Component } from '@angular/core'; // you need to import the pipe you want to use import { JsonPipe } from '@angular/common'; @Component({ selector: 'ns-ponies', template: `{% raw %}{{poniesAsJson}}{% endraw %}
` }) export class PoniesComponent { ponies: Array{% raw %}{{ ponies | slice:0:2 | json }}{% endraw %}
``` 이 예제는 조랑말 목록의 처음 두 요소를 표시한다. slice는 배열과 문자열로 작동하므로 문자열을 자를 수도 있다. ```markup{% raw %}{{ 'Ninja Squad' | slice:0:5 }}{% endraw %}
``` 'Ninja'만 표시될 것이다. 슬라이스 파이프에 하나의 인덱스 n만을 줄 수 있으며 n에서 끝까지 요소를 가져올것이다. ```markup{% raw %}{{ 'Ninja Squad' | slice:3 }}{% endraw %}
``` 음수를 지정하면 뒤에서 부터 자를 것이다. ```markup{% raw %}{{ 'Ninja Squad' | slice:-5 }}{% endraw %}
``` 우리가 보았 듯이, 파이프에게 종료 인덱스를 줄 수 있다 :이 인덱스까지 요소를 가져옵니다. 이 인덱스가 음수이면 인덱스까지 요소를 취하지만 끝에서부터 시작한다. ```markup{% raw %}{{ 'Ninja Squad' | slice:2:-2 }}{% endraw %}
``` 임의의 표현식에서 slice를 사용할 수 있으므로 NgFor에서도 사용할 수 있다. ```javascript import { Component } from '@angular/core'; @Component({ selector: 'ns-ponies', template: `{% raw %}{{ 'Ninja Squad' | uppercase }}{% endraw %}
``` 이 파이프의 이름이 충분히 명확 해지면서이 파이프는 문자열을 소문자로 변환 한다. ```markup{% raw %}{{ 'Ninja Squad' | lowercase }}{% endraw %}
``` 이 파이프는 숫자의 서식을 지정할 수 있다. {integerDigits} {minFractionDigits} - {maxFractionDigits} 형식의 문자열 하나가 필요하지만 모든 부분은 선택 사항 이다. 각 부분은 다음을 나타낸다. • 정수 부분에 원하는 수의 개수 • 소수 부분에서 원하는 숫자의 수 • 소수 부분에서 원하는 숫자의 수 파이프가 없는 것부터 시작하는 몇 가지 예이다. ```markup{% raw %}{{ 12345 }}{% endraw %}
``` 숫자 파이프를 사용하면 숫자가 필요하지 않은 경우에도 정수 부분이 그룹화 된다. ```markup{% raw %}{{ 12345 | number }}{% endraw %}
``` integerDigits 매개 변수는 필요한 경우 정수 부분을 0으로 왼쪽에 채워 준다. ```markup{% raw %}{{ 12345 | number:'6.' }}{% endraw %}
``` minFractionDigits는 소수 부분의 최소 크기이므로 도달 할 때까지 오른쪽에 0을 채워 준다. ```markup{% raw %}{{ 12345 | number:'.2' }}{% endraw %}
``` maxFractionDigits는 소수 부분의 최대 크기이다. 그것을 원한다면 minFractionDigits를 0으로 지정해야 한다. 숫자가 그 보다 소수 이상이면 반올림된다. ```markup{% raw %}{{ 12345.13 | number:'.1-1' }}{% endraw %}
{% raw %}{{ 12345.16 | number:'.1-1' }}{% endraw %}
``` 파이프 (백분율과 통화는 물론)는 브라우저의 국제화 API를 사용하며 이 API는 현재 모든 브라우저에서 사용할 수 없다. 이는 알려진 문제이며 일부 브라우저 (Safari / iOS 등)에서이 API에 대해 polyfill을 사용하도록 해야 한다.\{% raw %}{{ 0.8 | percent }}{% endraw %}
{% raw %}{{ 0.8 | percent:'.3' }}{% endraw %}
``` 상상할 수 있듯이 파이프는 원하는 통화로 금액을 형식화 할 수 있다. 적어도 하나의 매개 변수를 지정해야 한다. • 통화를 나타내는 ISO 문자열 ( 'EUR', 'USD'...) • 선택적으로 기호 ( '€', '$') 또는 ISO 문자열을 사용할지 여부를 나타내는 부울 플래그. 기본적으로, 플래그는 false이며 심볼은 사용되지 않는다. • 선택적으로 number와 동일한 구문을 사용하여 금액을 형식화하는 문자열 ```markup{% raw %}{{ 10.6 | currency:'EUR' }}{% endraw %}
{% raw %}{{ 10.6 | currency:'USD':true }}{% endraw %}
{% raw %}{{ 10.6 | currency:'USD':true:'.3' }}{% endraw %}
``` 날짜 파이프는 날짜 값을 원하는 형식의 문자열로 포맷이다. 날짜는 Date 개체 또는 밀리 초를 나타낸다. 지정된 형식은 'dd / MM / yyyy', 'MM-yy'또는 'short', 'longDate'등과 같이 미리 정의 된 기호 이름 중 하나 일 수 있다. ```markup{% raw %}{{ birthday | date:'dd/MM/yyyy' }}{% endraw %}
{% raw %}{{ birthday | date:'longDate' }}{% endraw %}
``` 물론 날짜의 시간 부분을 표시 할 수도 있다. ```markup{% raw %}{{ birthday | date:'HH:mm' }}{% endraw %}
{% raw %}{{ birthday | date:'shortTime' }}{% endraw %}
``` 비동기 파이프를 사용하면 비동기 적으로 가져온 데이터를 표시 할 수 있다. 내부적으로 비동기 데이터가 Promise 또는 Observable에서 온 것인지 여부에 따라 PromisePipe 또는 ObservablePipe를 사용한다. Promise가 무엇인지 이제는 알고 있어야 한다. 그렇지 않으면 ES6 장으로 돌아가서 Observable를 확인하도록 하라.\