我有一个HTML INPUT字段。
<input
[(ngModel)]="item.value"
name="inputField"
type="text"
/>
我想格式化其值并使用现有管道:
....
[(ngModel)]="item.value | useMyPipeToFormatThatValue"
....
并得到错误信息:
动作表达式中不能有管道
在这种情况下如何使用管道?
您不能在模板语句中使用模板表达式运算符(管道,保存导航器):
(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" />
有人可以解释为什么必须这样拆分吗?我正在尝试将日期绑定到类型为date的输入:[(ngModel)] =“ model.endDate | date:'y-MM-dd'”,管道将无法工作。但是,如果我放弃了香蕉语法并使用上面的拆分语法,则效果很好。
这真的有用吗?它对我不起作用。它说动作表达式中不能有管道
这对我有用!@BlakeRivell“ []”将属性从数据源单向绑定到查看目标,此时您可以更改管道显示的方式。当使用“()”绑定时,改变格式的另一种方法在这里将毫无用处。因此,我猜这就是为什么香蕉在“ [()]”框中不适合与管道配合使用并将其分开的方法。您可以在此处了解更多信息:angular.io/docs/ts/latest/guide/…
请注意,在该示例中,管道仅在一个方向上起作用。假设
item.value
是一个数字,您DatePipe
可以将其转换为日期字符串。编辑日期后,$event
还将是日期字符串,将不适合日期。item.value
您必须反转(ngModelChange)
表达式中管道的内容,即将日期字符串改回数字。@Protagonist
(ngModelChange)="updateItemValue($event)"
,然后创建一个updateItemValue(date: string)
方法并在其中添加方法item.value = someConversionFunction(date);
现在,如果您要询问将什么用作转换函数,我不知道。也许Date.parse()
可以。