在 Angular 的 INPUT 元素上使用 ngModel 中的管道

小编典典

在 Angular 的 INPUT 元素上使用 ngModel 中的管道

all

我有一个 HTML INPUT 字段。

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

我想格式化它的值并使用现有的管道：

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

并得到错误信息：

动作表达式中不能有管道

在这种情况下如何使用管道？

阅读 66

2022-08-16

共1个答案

小编典典

您不能在模板语句中使用模板表达式运算符（管道、保存导航器）：

(ngModelChange)="Template statements"

~~(ngModelChange)=”item.value | useMyPipeToFormatThatValue=$event”~~

https://angular.io/guide/template-syntax#template-
statements

与模板表达式一样，模板语句使用类似于 JavaScript 的语言。模板语句解析器与模板表达式解析器不同，它特别支持基本赋值 (=) 和链接表达式（使用
; 或 ,）。

但是，某些 JavaScript 语法 是不允许的 ：

新的

递增和递减运算符，++ 和 –

运算符赋值，例如 += 和 -=

位运算符 | 和＆

模板表达式运算符

所以你应该这样写：

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

Plunker 示例

2022-08-16