Angular - 使用管道轉換資料

---

---

Angular 有很多過濾器和管道，可用於轉換資料。

小寫

用於將輸入轉換為全小寫。

語法

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 

引數

• 開始 - 這是切片應該開始的起始位置。

• 結束 - 這是切片應該結束的起始位置。

結果

屬性值將根據起始和結束位置進行切片。

示例

首先確保以下程式碼存在於 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” 

引數

日期格式 - 這是輸入字串應轉換為的日期格式。

結果

屬性值將轉換為日期格式。

示例

首先確保以下程式碼存在於 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}’

引數

• 最小整數位數 - 這是最小整數位數。

• 最小小數位數 - 這是最小小數位數。

• 最大小數位數 - 這是最大小數位數。

結果

屬性值將轉換為百分比格式

示例

首先確保以下程式碼存在於 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> 

輸出

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。