Angular 2 - Dữ liệu chuyển đổi

Angular 2 có rất nhiều bộ lọc và đường ống có thể được sử dụng để biến đổi dữ liệu.

chữ thường

Điều này được sử dụng để chuyển đổi đầu vào thành tất cả chữ thường.

Cú pháp

Propertyvalue | lowercase

Thông số

không ai

Kết quả

Giá trị thuộc tính sẽ được chuyển đổi thành chữ thường.

Thí dụ

Trước tiên, hãy đảm bảo mã sau có trong tệp 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"]; 
}

Tiếp theo, đảm bảo mã sau có trong tệp 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>

Đầu ra

Khi bạn lưu tất cả các thay đổi mã và làm mới trình duyệt, bạn sẽ nhận được kết quả sau.

chữ hoa

Điều này được sử dụng để chuyển đổi đầu vào thành tất cả các chữ hoa.

Cú pháp

Propertyvalue | uppercase

Thông số

Không ai.

Kết quả

Giá trị thuộc tính sẽ được chuyển thành chữ hoa.

Thí dụ

Trước tiên, hãy đảm bảo mã sau có trong tệp 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"]; 
}

Tiếp theo, đảm bảo mã sau có trong tệp 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>

Đầu ra

Khi bạn lưu tất cả các thay đổi mã và làm mới trình duyệt, bạn sẽ nhận được kết quả sau.

lát

Điều này được sử dụng để cắt một phần dữ liệu từ chuỗi đầu vào.

Cú pháp

Propertyvalue | slice:start:end

Thông số

start - Đây là vị trí bắt đầu từ nơi bắt đầu lát cắt.
end - Đây là vị trí bắt đầu từ nơi mà lát cắt sẽ kết thúc.

Kết quả

Giá trị thuộc tính sẽ được phân chia dựa trên vị trí bắt đầu và kết thúc.

Thí dụ

Trước tiên, hãy đảm bảo mã sau có trong tệp 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"];
}

Tiếp theo, đảm bảo mã sau có trong tệp 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>

Đầu ra

Khi bạn lưu tất cả các thay đổi mã và làm mới trình duyệt, bạn sẽ nhận được kết quả sau.

ngày

Điều này được sử dụng để chuyển đổi chuỗi đầu vào sang định dạng ngày tháng.

Cú pháp

Propertyvalue | date:”dateformat”

Thông số

dateformat - Đây là định dạng ngày mà chuỗi đầu vào sẽ được chuyển đổi thành.

Kết quả

Giá trị thuộc tính sẽ được chuyển đổi sang định dạng ngày tháng.

Thí dụ

Trước tiên, hãy đảm bảo mã sau có trong tệp 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); 
}

Tiếp theo, đảm bảo mã sau có trong tệp app / app.component.html.

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

Đầu ra

Khi bạn lưu tất cả các thay đổi mã và làm mới trình duyệt, bạn sẽ nhận được kết quả sau.

tiền tệ

Điều này được sử dụng để chuyển đổi chuỗi đầu vào sang định dạng tiền tệ.

Cú pháp

Propertyvalue | currency

Thông số

Không ai.

Kết quả

Giá trị tài sản sẽ được chuyển đổi sang định dạng tiền tệ.

Thí dụ

Trước tiên, hãy đảm bảo mã sau có trong tệp app.component.ts.

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

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

export class AppComponent { 
   newValue: number = 123; 
}

Tiếp theo, đảm bảo mã sau có trong tệp app / app.component.html.

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

Đầu ra

Khi bạn lưu tất cả các thay đổi mã và làm mới trình duyệt, bạn sẽ nhận được kết quả sau.

tỷ lệ phần trăm

Điều này được sử dụng để chuyển đổi chuỗi đầu vào sang định dạng phần trăm.

Cú pháp

Propertyvalue | percent

Thông số

không ai

Kết quả

Giá trị thuộc tính sẽ được chuyển đổi sang định dạng phần trăm.

Thí dụ

Trước tiên, hãy đảm bảo mã sau có trong tệp app.component.ts.

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

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

export class AppComponent { 
   newValue: number = 30; 
}

Tiếp theo, đảm bảo mã sau có trong tệp app / app.component.html.

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

Đầu ra

Khi bạn lưu tất cả các thay đổi mã và làm mới trình duyệt, bạn sẽ nhận được kết quả sau.

Có một biến thể khác của đường ống phần trăm như sau.

Cú pháp

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

Thông số

minIntegerDigits - Đây là số chữ số nguyên tối thiểu.
minFractionDigits - Đây là số chữ số phân số nhỏ nhất.
maxFractionDigits - Đây là số chữ số phân số lớn nhất.

Kết quả

Giá trị thuộc tính sẽ được chuyển đổi sang định dạng phần trăm

Thí dụ

Trước tiên, hãy đảm bảo mã sau có trong tệp app.component.ts.

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

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

export class AppComponent { 
   newValue: number = 0.3; 
}

Tiếp theo, đảm bảo mã sau có trong tệp app / app.component.html.

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

Đầu ra

Khi bạn lưu tất cả các thay đổi mã và làm mới trình duyệt, bạn sẽ nhận được kết quả sau.