Angular2-データの変換

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>

出力

すべてのコード変更を保存してブラウザを更新すると、次の出力が得られます。