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

2024-04-02

我有一个 HTML 输入字段。

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

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

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

并得到错误消息:

操作表达式中不能有管道

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


你不能使用模板表达式运算符 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#expression-operators模板语句中的(管道,保存导航器):

(ngModelChange)="Template statements"

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

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

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

然而,某些 JavaScript 语法不允许:

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

所以你应该这样写:

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

笨蛋的例子 https://plnkr.co/edit/0CQVXl1Y9UsDp5TCszSk?p=preview

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 ngModel 中对 Angular 中的 INPUT 元素使用管道 的相关文章

  • Angular 4 - “等待操作”的正确方法是什么?

    我遇到了一个简单的问题 有一个很奇怪的解决方案setTimeout 0 看看这个简单的代码 Component selector my app template div div
  • 从版本 14 更新到 15 后,Angular $localize 错误

    从版本更新我们的 Angular 应用程序后14 0 4到版本15 1 3 之前也尝试过15 1 2 我们在尝试访问该应用程序时收到以下错误 Uncaught Error It looks like your application or
  • 循环遍历字符串数组 - angular2

    然而非常基本的事情 但我无法弄清楚如何在 angular2 中的 html 模板中显示字符串数组 html ul li number li ul ts this numberOptions I II III IV V VI VII VIII
  • 在 Angular 6 中将多个值传递给管道

    我需要使用管道在 Angular 6 中创建一个搜索表单 并且必须将多个参数传递给管道 nameSearch emailSearch roleSeach accountSearch tr tr 这是我的烟斗 Pipe name search
  • C# CreatePipe() -> 受保护的内存错误

    我尝试使用 C 创建管道 代码非常简单 但是当行与CreatePipe 调用被执行我得到一个System AccessViolationException并出现以下错误消息 尝试读取或写入受保护的内存 这通常表明其他内存已损坏 这是我的表单
  • Angular 2:当我通过浏览器刷新时发生404错误[重复]

    这个问题在这里已经有答案了 我已将单页应用程序存储在服务器中名为 myapp 的文件夹中 我已将库中的 URL 更改为http example com myapp http example com myapp 60 我的项目有两个页面 所以
  • 通过innerHTML输入时span不应用css样式

    我有 Angular 应用程序 作为它的一部分 我在 div 中显示查询结果 具有 JSONContainer 的 ID 我想突出显示结果中的特定查询 因此我使用了一个管道来搜索结果 并将文本中的 FIELD VALUE 替换为 span
  • 如何在 angularjs 4 中设置 http 调用超时?

    我在 angularjs 4 官方页面上看到过 https angular io guide http https angular io guide http 设置http调用超时但我没有找到任何参考 有人尝试过设置吗 谢谢 如果您使用 R
  • 如何避免 Angular 材料中出现额外的 mat-form-field-underline

    我在查找为什么在使用组件时会出现额外的 mat form field underline 时遇到问题 我的页面使用此标记
  • 有哪些基于对象的 shell?

    我打算写一个面向对象的shell 基于Python 我已经有很多想法了 但在实现它之前 我想通过一些现有的 shell 来激发我的灵感 我所说的面向对象的基本意思是 参数不仅仅是字符串数组 而且是对象数组 返回值也是一个对象 不仅有 std
  • 是否可以在运行时动态设置组件@Input?

    说我有一个dynamic component wrapper可以实例化任何Component传递给它的类 DRE013 DCOOKE 16 05 2017 The component to instantiate Input compone
  • 如何修改primeng p日历样式?

    我正在尝试修改 primeng p calendar 但它无法正常工作 例如 我希望它是这样的 需要的改变 https i stack imgur com QBXoh png 但原来它看起来像这样 原始图像 https i stack im
  • 元素上的 *ngIf 和 *ngFor [重复]

    这个问题在这里已经有答案了 我遇到的情况是 我需要在同一元素上使用 ngIf 和 ngFor 指令 我在 stackoverlow 上找到了很多答案 但没有一个适合这种情况 我有一个表 在其中循环对象数组并在标题中动态写入单元格 table
  • 将 SCSS 与使用 angular-cli 创建的 Angular 库结合使用

    我创建了一个角度库项目 我想在其中使用 SCSS 样式 所以我已经配置了 ng config schematics schematics angular component styleext scss 这进入了角度 json file sc
  • 拖动元素时是否禁用 mousemove 事件?

    我试图通过在拖动元素时观察文档上的 mousemove 事件来移动元素 使用 html5 拖放 我在文档的父元素上添加了一个 mousemove 侦听器 每当我移动鼠标时都会触发该监听器 但是一旦我开始拖动另一个子元素 我就不再看到 mou
  • 使用 Observable 与 Immutable 进行变更检测

    所以我读了本文 http victorsavkin com post 110170125256 change detection in angular 2关于 Angular 2 变更检测 但读完之后我变得更加困惑 所以我开始阅读一些导致更
  • 如何在 Angular @Input 中仅接受预定义值

    我的问题是 我在 a 中收到一个字符串值作为组件的参数 但我想限制可以用作参数的值 就像enum I use Input type string 但是在组件中 一切都可以引入type正如我之前所说 我需要将其限制为 3 个选项 例如Enum
  • angular2 MdDialog 未显示为弹出窗口

    所以我尝试使用 MdDialog 来显示错误消息 不幸的是 它不是显示为弹出窗口 而是显示为页面底部的块 我需要查看或更改哪些内容才能使其正常工作 下面的代码 common modal component html h2 title h2
  • 是否可以在 Angular Material Tooltip 中包含一个列表?

    基本上我想在我的工具提示中有一个 ul 元素 我正在使用 Angular 5 以及 Angular 5 的兼容材质 帕维尔 阿加科夫 Pavel Agarkov 的评论方向是正确的 为了让事情变得简单 创建一个自定义管道来自动将文本转换为项
  • 如何在 Angular 4 中翻译 mat-paginator?

    你知道如何在 Angular 中翻译 每页项目 吗mat paginator标签 这mat paginator是材料设计中的一个元素 您可以使用MatPaginatorIntl为了这 威尔 豪厄尔制作 https github com an

随机推荐