ビルトインアングルパイプ-パート5

今日、我々は、ビルトイン角度パイプを学び続けます.
パイプはこの柱で覆われている.LowerCasePipe PercentPipe SlicePipe TitleCasePipe UpperCasePPipe LowerCasePipeこのパイプはアルファベットの文字列を小文字または小文字に変換するために使用される
構文{{ value | lowercase }}からエクスポートされますCommonModuleそれだけstring 入力として.
それでは、例を見てください.我々の遊び場👇

コンポーネントの下のコードにペーストします.TSファイル

myName = 'JOHN DOE';

コンポーネントHTMLファイルで以下のコードをペーストします

<hr>
<h2>Lowercase Pipe Demo</h2>
<h3>Without Pipe</h3>
<p>{{myName }}</p>
<h3>With Pipe</h3>
<p>{{myName | lowercase}}</p>

ブラウザで以下の出力が表示されます👇

だからここでは、元の値を取得しているパイプを使用せずに、しかしlowercasePipe 値を小文字に変換します.PercentPipeそれはパーセントを文字列に変更します.グループのサイズとセパレータを決定するロケール規則に従ってフォーマットできます.
構文{{ value_expression | percent [ : digitsInfo [ : locale ] ] }}からエクスポートされますCommonModuleそれだけstring or number 入力として.
パラメータdigitsInfo -
その正確には、DigitsInfoと同じですdecimal pipe . 私はあなたに見てもらいたい
練習で見ましょう
我々は、同じ遊び場で働いている.
を返します.TSファイルは以下のコードをペーストします

 percentValue = 0.234769;

テンプレートファイルで以下のコードをペーストします

<h2>Percent Pipe Demo</h2>
<p>{{ percentValue | percent }} </p>

出力を見る

ここでは、出力は
見るべきもの
値が丸められ、パーセント記号が追加されました.
今すぐ更新する場合percentValue 0.237769までの変数
出力は24 %になります
この場合、桁の情報を渡さない場合は小数点以下の桁がなくなり、丸められます.
今どのように数字の情報を見ることができます.テンプレートファイルの下のコードをペーストします

<hr>
<h3>digitsInfo Example</h3>
<p>{{ percentValue | percent: '2.2-3'}} </p>

ここで出力は-

上記出力の説明
decimalの前の桁の2(2)は出力の小数点の前に何桁の数字があるかを示します.
ノート
出力値が10進数の前の2桁(例えば、この場合)があるならば、あなたはDigimal<p>{{ percentValue | percent: '1.2-3'}} </p> ) それでも、10進数の前に2桁が表示されます.
Decimalの前に3桁を使いたい場合、DigitsInfoは- 3.2 - 3と0のようになります.1.2-3 => 2と3は小数点以下の最小値と最大桁を示します.最小2桁が最大3となります.我々が通過した値が3桁以上あるので、我々は小数点以下の3桁を見ることができます.SlicePipeこのパイプは、入力文字列または項目の配列のサブセットを作成します.
構文{{ value_expression | slice : start [ : end ] }}からエクスポートされますCommonModule入力として文字列あるいは配列をとる
パラメータstart型番
それは必須です.endそれは数です.文字列/配列の終了位置をマークします(ただし、endは含まれません).
オプションです
デフォルト値は未定義です.
今すぐに例を見にジャンプすることができます.
次のコードをコンポーネントに追加します.tsファイル.

  sliceDemoString = 'John Snow';

  sliceDemoArray = ['a', 'b', 'c', 'd', 'e'];

テンプレートファイルで次のコードを追加できます

<h2>Slice Pipe Demo</h2>
<hr>
<h3>Without using slice pipe</h3>
<p>{{ sliceDemoString }} </p>
<p>{{ sliceDemoArray }} </p>
<h3>Without using slice pipe</h3>
<p>{{ sliceDemoString | slice: 2 }} </p>
<p>{{ sliceDemoArray | slice: 1}} </p>

出力は以下のようになります-

解説
ここでは、スライスパイプを使用して、最初の例では、我々は2つの凝視点として渡されます.それで、ストリングからJohn Snow JO文字を切り出して削除し、残りの文字列を返しました(jは0番目のインデックスです.
番目の例では、1を渡したので、最初の項目または0番目のインデックス項目が削除され、第1インデックスから開始されました.
上記のコードを更新し、以下のコードをテンプレートファイルに書き込みます

<p>{{ sliceDemoString | slice: 2:4 }} </p>
<p>{{ sliceDemoArray | slice: 1:3}} </p>

出力は-

そこで、最初の例では、サブセットは2番目のインデックスから始まり、(end - 1)インデックスの3番目のインデックスで終了します.
2番目の例ではstart indexは1で、end indexは3ではなかったが(endindex - 1)、つまりb、cが返された.TitleCasePipeこのパイプはテキストをタイトルケースに変換します.それはあなたが文を渡す場合は、渡された単語のすべての最初の文字は、キャピタルケースになるだろう.
構文{{ value_expression | titlecase }}からエクスポートされますCommonModule入力として文字列をとります.
例で見ることができます.次のコードをコンポーネントに追加します.TSファイル

titleCasePipeDemoString = 'You will be master in Angular 
very soon!';

テンプレートファイル

<h2>TitleCase pipe</h2>
<h3>Without using pipe</h3>
<p>{{ titleCasePipeDemoString }}</p>

<h3>With using the Titlecase pipe</h3>
<p>{{ titleCasePipeDemoString | titlecase}}</p>

出力が-になります-

だからここでは、単語のすべての最初の文字を参照することができます資本化されます.
最後のパイプUpperCasePipeその反対LowerCasePipe . 文字列を大文字に変換します.
構文{{ value_expression | uppercase }}からエクスポートされますCommonModule入力として文字列をとります.
例で見ることができます.次のコードをコンポーネントに追加します.TSファイルuppsercasePipeDemo = 'john snow';テンプレートファイル

<h2>UpperCase Pipe Demo</h2>
<h3>Without Pipe</h3>
<p> {{ uppsercasePipeDemo }}</p>

<h3>With Pipe</h3>
<p> {{ uppsercasePipeDemo | uppercase }}</p>

出力が-になります-

この関数は、渡された文字列を大文字で変換します.
それはすべて私の友人です.あなたはすべてのパイプをカバーする素晴らしい仕事をしました(私が意図的に非常にすぐにカバーするままにした少数).
次のカスタムパイプを作成する
あなたがポストを楽しんだという望み.
Yesがコメントと共有のようにするならば.より角度の話題は途中です.調子を合わせなさい.
チアーズ!
ハッピーコーディング