小编典典

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

all

我有一个 HTML INPUT 字段。

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

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

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

并得到错误信息:

动作表达式中不能有管道

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


阅读 62

收藏
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