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

通常、データをフォーマットするにはパイプを使用する必要があります。次の記事では主に 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 = 'app'; 
 name = '张三丰'; 
 time = new Date(); 
 number = 1.123; 
 show(str: string) { 
 str += '---测试'; 
 return str; 
 } 
}

表示結果:

上記は、今後皆さんのお役に立てれば幸いです。

関連記事:

Angularで入力内容を表示する方法

Angularで天気予報をクエリする方法

JSで休日を決定する方法

JSで掲示板機能を実装する方法

nodejsでOAuth2.0認可サービス認証を実装する方法

webpackでvueプロジェクトをビルドする方法

vueで実装する方法全文を読む

vueでdom要素を取得する方法

js でタイムスタンプ形式を変換する方法

nginx に vue プロジェクトをデプロイする (詳細なチュートリアル)

ionic3 でランダム レイアウトのウォーターフォール フローを実装する方法

以上がAngular でのパイプ演算子 (|) の使用についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。