AngularのINPUT要素でngModel内のパイプを使用する質問する

AngularのINPUT要素でngModel内のパイプを使用する質問する

HTML INPUT フィールドがあります。

<input 
    [(ngModel)]="item.value" 
    name="inputField" 
    type="text" 
/>

そして、その値をフォーマットし、既存のパイプを使用したいと思います。

.... 
[(ngModel)]="item.value | useMyPipeToFormatThatValue" 
....

次のエラーメッセージが表示されます:

アクション式にパイプを使用することはできません

このコンテキストでパイプをどのように使用すればよいでしょうか?

ベストアンサー1

使用できませんテンプレート式演算子(パイプ、保存ナビゲーター) テンプレートステートメント内:

(ngModelChange)="Template statements"

(ngModelChange)="item.value | useMyPipeToFormatThatValue=$event"

https://angular.io/guide/template-syntax#テンプレートステートメント

テンプレート式と同様に、テンプレート ステートメントは JavaScript に似た言語を使用します。テンプレート ステートメント パーサーはテンプレート式パーサーとは異なり、基本的な代入 (=) と連鎖式 (; または , を使用) の両方を具体的にサポートします。

ただし、特定のJavaScript構文許可されていません:

  • 新しい
  • インクリメント演算子とデクリメント演算子、++ と --
  • += や -= などの演算子の割り当て
  • ビット演算子 | と &
  • テンプレート式演算子

したがって、次のように記述する必要があります。

<input [ngModel]="item.value | useMyPipeToFormatThatValue" 
      (ngModelChange)="item.value=$event" name="inputField" type="text" />

プランカーの例

おすすめ記事