在 Angular 的 INPUT 元素上使用 ngModel 中的管道 [英] Using Pipes within ngModel on INPUT Elements in Angular

查看:24
本文介绍了在 Angular 的 INPUT 元素上使用 ngModel 中的管道的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个 HTML INPUT 字段.

I've an HTML INPUT field.

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

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

and I want to format its value and use an existing pipe:

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

并获取错误消息:

动作表达式中不能有竖线

Cannot have a pipe in an action expression

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

How can I use pipes in this context?

推荐答案

您不能使用 模板语句中的模板表达式运算符(管道,保存导航器):

You can't use Template expression operators(pipe, save navigator) within template statement:

(ngModelChange)="Template statements"

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

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

与模板表达式一样,模板语句使用的语言看起来像 JavaScript.模板语句解析器不同于模板表达式解析器,特别支持基本的赋值 (=) 和链接表达式(使用 ; 或 ,).

Like template expressions, template statements use a language that looks like JavaScript. The template statement parser differs from the template expression parser and specifically supports both basic assignment (=) and chaining expressions (with ; or ,).

但是,某些 JavaScript 语法是不允许的:

However, certain JavaScript syntax is not allowed:

  • 自增和自减运算符,++ 和 --
  • 运算符赋值,例如 += 和 -=
  • 按位运算符 |和&
  • 模板表达式运算符

所以你应该这样写:

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

Plunker 示例

这篇关于在 Angular 的 INPUT 元素上使用 ngModel 中的管道的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆