序文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 操作ガイド
この記事では主に、MySQL の Aborted アラームに関する関連コンテンツを紹介し、参考と学習...
Linux に zip 解凍機能をインストールする通常、 zip コマンドは Linux サーバーに...
目次シナリオタスクアイデア分析するコンセプトと選択ちょっとしたテスト環境説明予防実践テスト引用シナリ...
私が書いた内容が理解できない場合は、インターネット上に理解できるチュートリアルがない可能性があります...
質問。モバイルショッピングモールシステムでは、ページの上部に検索ボックスがよく見られます。ブロガーは...
v-model は、入力とフォーム データ間、または 2 つのコンポーネント間の双方向データ バイ...
素敵なフリップログインと登録インターフェースを作成する序文最近、ネットワーク ディスクを構築しようと...
目次手動展開1.アイデアを使ってSpring Bootプロジェクトを作成する2. プロジェクトをJa...
目次導入1. MySQLデータベースの全体的なアーキテクチャSQL インターフェースパーサーオプティ...
定義と使用方法:コンポーネントのテンプレートでスロットタグの定義を使用します。デフォルトの表示値は、...
MySQL 8 の公式バージョン 8.0.11 がリリースされました。公式発表によると、MySQL ...
入力ボックスが小さい場合、内容を入力した後に、入力内容が拡大されたプロンプト ボックスを表示したいこ...
Centos7 バージョンをインストールするときに、外部ネットワークへの接続を選択すると、外部ネット...
序文私のチームが税制モジュールを開発していたとき、計算問題、特にグリッド内の計算を解決するために時間...
この記事では主に、 list-itemの下にある::master疑似要素、 list-style-i...