집 > 기사 > 웹 프론트엔드 > Angular의 파이프 연산자(|) 사용법에 대해

Angular의 파이프 연산자(|) 사용법에 대해

亚连원래의: 2018-06-20 15:54:142735검색

보통 데이터 포맷을 위해 파이프를 사용해야 하는데, 다음 글에서는 주로 Angular에서 파이프 연산자(|)를 사용하는 방법을 소개하고 있는데, 필요한 분들은 참고하시면 됩니다. 아래 에디터와 함께 배워보겠습니다.

파이프라인이란 무엇인가요?

Angular의 파이프라인은 데이터 형식 지정 및 표시를 위한 도구로 간주할 수 있습니다. 파이프는 소스 데이터를 변경하지 않고도 표시할 데이터 형식을 지정할 수 있습니다. 예를 들어 날짜 표시와 관련하여 파이프라인 1을 사용하면 yyyy/MM/dd 형식으로 소스 데이터를 표시할 수 있고, 파이프라인 2를 사용하면 2017년 2월 28일 형식으로 표시할 수 있습니다. 그러나 원본 데이터는 여전히 날짜이며 변경되지 않았습니다. 파이프라인을 사용하면 데이터 형식화의 내용을 분리하여 독립적으로 만들 수 있습니다. 형식화 및 표시가 필요한 경우 처리할 해당 파이프라인을 선택하기만 하면 됩니다.

1. 템플릿 표현식 연산자

템플릿 표현식 언어는 JavaScript 구문의 하위 집합을 사용하고 특정 시나리오에 대한 여러 특수 연산자(파이프 연산자 및 안전 탐색 연산자)를 추가합니다.

2. 파이프 연산자(|)

바인딩하기 전에 표현식 결과에 약간의 변환이 필요할 수 있습니다. 예를 들어 숫자를 금액으로 표시하거나 텍스트를 대문자로 표시하거나 목록을 필터링 및 정렬할 수 있습니다.

각진 파이프 개체는 이와 같은 작은 변형에 매우 편리한 선택입니다.

파이프는 입력 값을 받아들이고 변환 결과를 반환하는 간단한 함수입니다.

Angular에서 일반적으로 사용되는 내장 파이프 함수:

DatePipe, UpperCasePipe, LowerCasePipe, MoneyPipi, PercentPipe, JsonPipe 등

템플릿 표현식에 사용됩니다. 파이프 연산자(|) 만 사용하세요.

사용 방법

파이프라인 연산자는 왼쪽의 표현식 결과를 오른쪽의 파이프라인 함수에 전달합니다. 여러 파이프를 통해 표현식을 연결할 수도 있습니다.

<p> 
 Title through a pipe chain: 
 {{title | uppercase | lowercase}} 
</p>

일반적인 예:

<p class="alert alert-warning"> 
 <p>{{title|uppercase }}</p> 
 <p>{{title|uppercase|lowercase }}</p> 
 <p>{{this|json}}</p> 
 <p>{{time|date:&#39;yyyy-MM-dd&#39;}}</p> 
 <p>{{number|percent}}</p> 
 <p>{{number|currency:&#39;CNY&#39;}}</p> 
</p>

ts 속성:

export class AppComponent { 
 title = &#39;app&#39;; 
 name = &#39;张三丰&#39;; 
 time = new Date(); 
 number = 1.123; 
 show(str: string) { 
 str += &#39;---测试&#39;; 
 return str; 
 } 
}

표시 결과:

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Angular의 파이프 연산자(|) 사용법에 대해

관련 기사