Angular でのパイプ演算子 (|) の使用について-jsチュートリアル-php.cn

Angular でのパイプ演算子 (|) の使用について

亚连

リリース： 2018-06-20 15:54:14

オリジナル

2843 人が閲覧しました

通常、データをフォーマットするにはパイプを使用する必要があります。次の記事では主に Angular でパイプ演算子 (|) を使用する方法を紹介します。必要な方は参照してください。以下のエディターで学習してみましょう。

パイプラインとは何ですか?

Angular のパイプラインは、データの書式設定と表示のためのツールとみなすことができます。パイプは、ソースデータを変更せずに、表示用にデータをフォーマットできます。たとえば、日付の表示については、パイプライン 1 を使用してソースデータを yyyy/MM/dd の形式で表示することも、パイプライン 2 を使用して 2017 年 2 月 28 日の形式で表示することもできます。ただし、元のデータはまだ日付のままであり、変更されていません。パイプラインを使用すると、データの書式設定の内容を分離して独立させることができ、書式設定と表示が必要な場合は、対応するパイプラインを選択して処理するだけです。

1. テンプレート式演算子

テンプレート式言語は、JavaScript 構文のサブセットを使用し、特定のシナリオ用にいくつかの特別な演算子 (パイプ演算子と安全なナビゲーション演算子) を追加します。

2. パイプ演算子 (|)

式の結果は、バインドする前に変換が必要な場合があります。たとえば、数値を金額として表示したり、テキストを強制的に大文字にしたり、リストをフィルター処理して並べ替えたりすることができます。

Angular パイプオブジェクトは、このような小さな変換には非常に便利な選択肢です。

パイプは、入力値を受け取り、変換結果を返す単純な関数です。

Angular の一般的に使用される組み込みパイプ関数:

DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipi、PercentPipe、JsonPipe など。

これらはテンプレート式で使用されます。パイプ演算子 (|) を使用するだけです。

使い方

パイプライン演算子は、左側の式の結果を右側のパイプライン関数に渡します。式は複数のパイプを介して連結することもできます。

<p> 
 Title through a pipe chain: 
 {{title | uppercase | lowercase}} 
</p>

ログイン後にコピー

一般的な例:

<p class="alert alert-warning"> 
 <p>{{title|uppercase }}</p> 
 <p>{{title|uppercase|lowercase }}</p> 
 <p>{{this|json}}</p> 
 <p>{{time|date:&#39;yyyy-MM-dd&#39;}}</p> 
 <p>{{number|percent}}</p> 
 <p>{{number|currency:&#39;CNY&#39;}}</p> 
</p>

ログイン後にコピー

ts 属性:

export class AppComponent { 
 title = &#39;app&#39;; 
 name = &#39;张三丰&#39;; 
 time = new Date(); 
 number = 1.123; 
 show(str: string) { 
 str += &#39;---测试&#39;; 
 return str; 
 } 
}

ログイン後にコピー

表示結果: