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

Question

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

我有一个HTML INPUT字段。

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

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

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

并收到错误消息：

动作表达式中不能有管道

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

Answer 1

<input&nbsp;[ngModel]="item.value&nbsp;|&nbsp;useMyPipeToFormatThatValue"&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(ngModelChange)="item.value=$event"&nbsp;name="inputField"&nbsp;type="text"&nbsp;/>这里的解决方案是将绑定拆分为单向绑定和事件绑定 - 语法[(ngModel)]实际包含在内。[]是单向绑定语法，()是事件绑定语法。当一起使用时 -&nbsp;[()]Angular将其识别为速记，并以单向绑定和绑定到组件对象值的事件的形式连接双向绑定。您不能使用[()]管道的原因是管道仅适用于单向绑定。因此，必须将管道拆分为仅对单向绑定进行操作并单独处理事件。有关详细信息，请参阅角度模板语法。

Answer 2

<input&nbsp;[ngModel]="item.value&nbsp;|&nbsp;currency"&nbsp;(ngModelChange)="item.value=$event"name="name"&nbsp;type="text"&nbsp;/>我想再接受一个接受的答案。如果输入控件的类型不是文本，则管道将不起作用。记住它并节省您的时间。