173

我有一个 HTML INPUT 字段。

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

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

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

并得到错误信息：

动作表达式中不能有管道

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

4

7 回答 7

258

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

(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 示例

于 2016-09-22T15:31:02.440 回答
125 
<input [ngModel]="item.value | useMyPipeToFormatThatValue" 
      (ngModelChange)="item.value=$event" name="inputField" type="text" />

此处的解决方案是将绑定拆分为单向绑定和事件绑定 - 语法[(ngModel)]实际上包含这些绑定。[]是单向绑定语法，()是事件绑定语法。当一起使用时 - [()]Angular 将其识别为简写，并以单向绑定和事件绑定的形式将双向绑定连接到组件对象值。

不能[()]与管道一起使用的原因是管道仅适用于单向绑定。因此，您必须将管道拆分为仅对单向绑定进行操作并单独处理事件。

有关更多信息，请参阅 Angular模板语法。

于 2017-02-06T07:45:55.650 回答
25 
<input [ngModel]="item.value | currency" (ngModelChange)="item.value=$event"
name="name" type="text" />

我想对已接受的答案再补充一点。

如果输入控件的类型不是文本，则管道将不起作用。

记住它并节省您的时间。

于 2018-08-21T06:56:51.933 回答
6

我尝试了上面的解决方案，但模型的值是格式化的值，然后返回并给我 currencyPipe 错误。所以我不得不

  [ngModel]="transfer.amount | currency:'USD':true"
                                   (blur)="addToAmount($event.target.value)"
                                   (keypress)="validateOnlyNumbers($event)"

而关于 addToAmount 的功能 -> 模糊变化导致 ngModelChange 给了我光标问题。

removeCurrencyPipeFormat(formatedNumber){
    return formatedNumber.replace(/[$,]/g,"")
  }

并删除其他非数值。

validateOnlyNumbers(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
于 2017-08-25T19:14:06.183 回答
1

您必须使用 [ngModel] 而不是与 [(ngModel)] 的双向模型绑定。然后将手动更改事件与 (ngModelChange) 一起使用。这是组件中所有双向输入的公共规则。

因为事件发射器上的管道是错误的。

于 2019-11-09T15:23:25.273 回答
1

我的解决方案在下面给出了 searchDetail 是一个对象..

<p-calendar  [ngModel]="searchDetail.queryDate | date:'MM/dd/yyyy'"  (ngModelChange)="searchDetail.queryDate=$event" [showIcon]="true" required name="queryDate" placeholder="Enter the Query Date"></p-calendar>

<input id="float-input" type="text" size="30" pInputText [ngModel]="searchDetail.systems | json"  (ngModelChange)="searchDetail.systems=$event" required='true' name="systems"
            placeholder="Enter the Systems">
于 2018-01-04T09:54:42.060 回答
0

由于两种方式绑定，为了防止错误：

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was 
checked.

你可以调用一个函数来改变这样的模型：

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


import { UseMyPipeToFormatThatValuePipe } from './path';

constructor({
    private UseMyPipeToFormatThatValue: UseMyPipeToFormatThatValuePipe,
})

getNewValue(ev: any): any {
    item.value= this.useMyPipeToFormatThatValue.transform(ev);
}

如果有更好的解决方案来防止此错误，那就太好了。

于 2020-02-03T13:34:14.337 回答