序文PIPE、パイプラインと翻訳されます。 Angular パイプは、HTML コンポーネントで宣言できる表示値の変換を記述する方法です。 Angular パイプは、以前は AngularJS ではフィルターと呼ばれていましたが、Angular 2 以降ではパイプと呼ばれるようになりました。パイプラインはデータを入力として受け取り、それを目的の出力に変換します。 Angular Pipes は、整数、文字列、配列、日付を | で区切って入力し、必要な形式に変換してブラウザーに表示します。補間式では、パイプを定義して、必要に応じて使用することができます。Angular アプリケーションで使用できるパイプには多くの種類があります。 組み込みパイプライン
使い方大文字変換 <div> <p ngNonBindable>{{ 'Angular' | 大文字 }}</p> <p>{{ 'Angular' | 大文字 }}</p> <!-- 出力: ANGULAR --> </div> 日付の書式設定 <div> <p ngNonBindable>{{ 今日 | 日付: 'shortTime' }}</p> <p>{{ today | date: 'shortTime' }}</p> <!-- 出力: 現在の時刻に基づき、出力形式は 10:40 AM --> </div> 数値の書式設定 <div> <p ngNonBindable>{{ 3.14159265 | 数値: '1.4-4' }}</p> <p>{{ 3.14159265 | 数値: '1.4-4' }}</p> <!-- 出力: 3.1416 --> </div> JavaScript オブジェクトのシリアル化 <div> <p ngNonBindable>{{ { name: 'semlinker' } | json }}</p> <p>{{ { name: 'semlinker' } | json }}</p> <!-- 出力: { "name": "semlinker" } --> </div> パイプラインパラメータ パイプラインは、パイプライン名の後に : とパラメータ値を追加することで、任意の数のパラメータを受け入れることができます。たとえば、number: '1.4-4' です。複数のパラメータを渡す必要がある場合は、コロンで区切ります。具体的な例は次のとおりです。 <div> <p ngNonBindable>{{ 'semlinker' | スライス:0:3 }}</p> <p>{{ 'semlinker' | slice:0:3 }}</p> <!-- 出力: sem --> </div> パイプラインチェーン <div> <p ngNonBindable>{{ 'semlinker' | スライス:0:3 | 大文字 }}</p> <p>{{ 'semlinker' | スライス:0:3 | 大文字 }}</p> </div> カスタムパイプライン以下では、以前のプロジェクトで使用したパイプラインを例として、パイプラインをカスタマイズする手順を説明します。
意味 "@angular/core" から Pipe、PipeTransform をインポートします。 @Pipe({ 名前: "formatError" }) エクスポートクラス FormatErrorPipe は PipeTransform を実装します { コンストラクタ() {} 変換(値: 任意、モジュール: 文字列) { if (値.コード) { 戻り値.desc; } それ以外 { 戻り値.メッセージ; } } } 使用 <div *ngIf="エラーメッセージ"> <div class="message-box error mb-16" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}"> {{errorMessage.error | formatError:"auth"}} </div> </div> 要約するAngular パイプ PIPE に関するこの記事はこれで終わりです。Angular パイプ PIPE に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Windows 2008 Server サブドメインを親ドメインに追加すると、ドメインが既に存在するというエラー メッセージが表示されます。
>>: MySQL 5.7 における基本的な JSON 操作ガイド
1. MavenをダウンロードするMaven 公式サイト: http://maven.apache...
目次1. 父と息子のコミュニケーション1.1 親コンポーネント --> 子コンポーネント1.2...
誰もがスクラッチ チケットで遊んだことがあると思います。子供の頃、ポケットにお金が入るとすぐに友達に...
最近、アルゴリズムについて学んでいて、アルゴリズムで動く小さなゲームに出会いました。そのコードは次の...
この記事では、マルチカラムレイアウトドラッグを実装するためのVueの具体的なコードを参考までに共有し...
この記事の内容: ページ中空マスクレイヤー、ページ中空マスクガイドレイヤー、画像中空マスク通常のマス...
Nginx は同じドメイン名で構成されており、http と https の両方でアクセスできます。証...
基本的な環境設定まずはご自身でドメイン名とサーバーを購入してくださいクラウドサーバーECSに基づいて...
最近 redis を使っていて、とても便利だと感じているのですが、インメモリ データベースを選択する...
ニーズの発見領域の一部のみスクロールでき、残りの部分は移動できない場合、どのような方法を使用しますか...
目次Nginx 負荷分散構成Nginx 負荷分散戦略ポーリング(デフォルト)重さip_ハッシュ公正(...
MYSQL を使用する場合、トリガーがよく使用されますが、不適切な使用によって問題が発生する場合が...
HTML タグには、ページのタイトルを処理するための特別なタグがあります。これらは h1、h2、h3...
問題の背景: docker を使用してプロジェクトをデプロイする場合、プロジェクト内で印刷コントロー...
次のようなシナリオがあります。円形のコンテナで、最も外側のコンテナの背景が円弧になっています。内側の...