Angular 2-데이터 변환

Angular 2에는 데이터를 변환하는 데 사용할 수있는 많은 필터와 파이프가 있습니다.

소문자

입력을 모두 소문자로 변환하는 데 사용됩니다.

통사론

Propertyvalue | lowercase

매개 변수

없음

결과

속성 값이 소문자로 변환됩니다.

예

먼저 app.component.ts 파일에 다음 코드가 있는지 확인하십시오.

import { 
   Component 
} from '@angular/core'; 

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   TutorialName: string = 'Angular JS2'; 
   appList: string[] = ["Binding", "Display", "Services"]; 
}

다음으로 app / app.component.html 파일에 다음 코드가 있는지 확인하십시오.

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | lowercase}}<br> 
   The second Topic is {{appList[1] | lowercase}}<br> 
   The third Topic is {{appList[2]| lowercase}}<br> 
</div>

산출

모든 코드 변경 사항을 저장하고 브라우저를 새로 고치면 다음 출력이 표시됩니다.

대문자

입력을 모두 대문자로 변환하는 데 사용됩니다.

통사론

Propertyvalue | uppercase

매개 변수

없음.

결과

속성 값이 대문자로 변환됩니다.

예

먼저 app.component.ts 파일에 다음 코드가 있는지 확인하십시오.

import { 
   Component 
} from '@angular/core';

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   TutorialName: string = 'Angular JS2'; 
   appList: string[] = ["Binding", "Display", "Services"]; 
}

다음으로 app / app.component.html 파일에 다음 코드가 있는지 확인하십시오.

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | uppercase }}<br> 
   The second Topic is {{appList[1] | uppercase }}<br> 
   The third Topic is {{appList[2]| uppercase }}<br> 
</div>

산출

모든 코드 변경 사항을 저장하고 브라우저를 새로 고치면 다음 출력이 표시됩니다.

일부분

이것은 입력 문자열에서 데이터 조각을 분할하는 데 사용됩니다.

통사론

Propertyvalue | slice:start:end

매개 변수

start − 이것은 슬라이스가 시작되어야하는 시작 위치입니다.
end − 이것은 슬라이스가 끝나야하는 시작 위치입니다.

결과

속성 값은 시작 및 끝 위치를 기준으로 슬라이스됩니다.

예

먼저 app.component.ts 파일에 다음 코드가 있는지 확인하십시오.

import {
   Component
} from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

다음으로 app / app.component.html 파일에 다음 코드가 있는지 확인하십시오.

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | slice:1:2}}<br> 
   The second Topic is {{appList[1] | slice:1:3}}<br> 
   The third Topic is {{appList[2]| slice:2:3}}<br> 
</div>

산출

모든 코드 변경 사항을 저장하고 브라우저를 새로 고치면 다음 출력이 표시됩니다.

데이트

입력 문자열을 날짜 형식으로 변환하는 데 사용됩니다.

통사론

Propertyvalue | date:”dateformat”

매개 변수

dateformat − 이것은 입력 문자열을 변환해야하는 날짜 형식입니다.

결과

속성 값이 날짜 형식으로 변환됩니다.

예

먼저 app.component.ts 파일에 다음 코드가 있는지 확인하십시오.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newdate = new Date(2016, 3, 15); 
}

다음으로 app / app.component.html 파일에 다음 코드가 있는지 확인하십시오.

<div> 
   The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}<br>  
</div>

산출

모든 코드 변경 사항을 저장하고 브라우저를 새로 고치면 다음 출력이 표시됩니다.

통화

입력 문자열을 통화 형식으로 변환하는 데 사용됩니다.

통사론

Propertyvalue | currency

매개 변수

없음.

결과

속성 값이 통화 형식으로 변환됩니다.

예

먼저 app.component.ts 파일에 다음 코드가 있는지 확인하십시오.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 123; 
}

다음으로 app / app.component.html 파일에 다음 코드가 있는지 확인하십시오.

<div> 
   The currency of this Tutorial is {{newValue | currency}}<br>      
</div>

산출

모든 코드 변경 사항을 저장하고 브라우저를 새로 고치면 다음 출력이 표시됩니다.

백분율

입력 문자열을 백분율 형식으로 변환하는 데 사용됩니다.

통사론

Propertyvalue | percent

매개 변수

없음

결과

속성 값은 백분율 형식으로 변환됩니다.

예

먼저 app.component.ts 파일에 다음 코드가 있는지 확인하십시오.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 30; 
}

다음으로 app / app.component.html 파일에 다음 코드가 있는지 확인하십시오.

<div>
   The percentage is {{newValue | percent}}<br> 
</div>

산출

모든 코드 변경 사항을 저장하고 브라우저를 새로 고치면 다음 출력이 표시됩니다.

백분율 파이프에는 다음과 같은 또 다른 변형이 있습니다.

통사론

Propertyvalue | percent: ‘{minIntegerDigits}.{minFractionDigits}{maxFractionDigits}’

매개 변수

minIntegerDigits − 이것은 정수의 최소 자릿수입니다.
minFractionDigits − 이것은 분수 자릿수의 최소 수입니다.
maxFractionDigits − 최대 분수 자릿수입니다.

결과

속성 값이 백분율 형식으로 변환됩니다.

예

먼저 app.component.ts 파일에 다음 코드가 있는지 확인하십시오.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 0.3; 
}

다음으로 app / app.component.html 파일에 다음 코드가 있는지 확인하십시오.

<div> 
   The percentage is {{newValue | percent:'2.2-5'}}<br>  
</div>

산출

모든 코드 변경 사항을 저장하고 브라우저를 새로 고치면 다음 출력이 표시됩니다.