开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

我的自定义管道(过滤器)在Angular 2中不起作用

在Angular 2中，自定义管道（过滤器）不起作用可能有多种原因。下面是一些可能的解决方案和建议：

确保正确引入和注册管道：首先，确保在使用自定义管道之前，已经正确引入并在相关的模块中进行了注册。在Angular 2中，需要在NgModule的providers数组中注册管道。
检查管道的命名和语法：确保自定义管道的命名和语法是正确的。在Angular 2中，管道的命名应该遵循驼峰命名法，并且在模板中使用时需要使用管道符号（|）来应用管道。
确保正确传递参数：如果你的自定义管道需要接收参数，确保在模板中正确传递了参数。在模板中使用管道时，可以使用冒号（:）来传递参数。
检查管道的实现逻辑：检查自定义管道的实现逻辑是否正确。确保在管道类中实现了transform方法，并且该方法返回了期望的结果。
检查模板中的管道使用：确保在模板中正确使用了自定义管道。在模板中使用管道时，需要将管道应用到相应的表达式上，并且使用管道符号（|）来表示应用管道。

如果以上解决方案都没有解决问题，可能需要进一步检查其他可能的错误或问题。可以查看Angular 2的官方文档、在线教程或社区论坛来获取更多关于自定义管道在Angular 2中使用的指导和帮助。

腾讯云相关产品和产品介绍链接地址：

云服务器（CVM）：提供弹性计算能力，满足各种业务需求。详情请参考：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版（CDB）：提供高性能、可扩展的关系型数据库服务。详情请参考：https://cloud.tencent.com/product/cdb
人工智能平台（AI Lab）：提供丰富的人工智能开发工具和服务，支持图像识别、语音识别等应用场景。详情请参考：https://cloud.tencent.com/product/ailab
云存储（COS）：提供安全可靠、高扩展性的对象存储服务，适用于各种数据存储需求。详情请参考：https://cloud.tencent.com/product/cos

相关搜索:Angular 7自定义过滤器管道不工作 Angular 4中Json对象数组的自定义管道过滤器 Angular2自定义过滤器管道是否多次运行？异步管道在Angular中的输入中不起作用如何在angular 4中创建接收对象作为过滤器的自定义管道 Jenkins管道无法识别我的Angular项目用于服务器分页的angular 4过滤器管道如何将异步管道放入我的自定义管道 SVG过滤器url在angular 4中不起作用自定义GMT格式Angular中的日期管道 clearInterval在我的angular代码中不起作用我的angular块在我的MVC项目中不起作用 angular 8-自定义管道在指令中工作吗？用于异步管道过滤的angular2 not不起作用使用moment的自定义日期管道在ie中不起作用 Angular 4:如何使用自定义的angular管道漂亮地打印json Angular材质组件在我的项目中不起作用自定义引导在angular 7中不起作用带参数的自定义Groovy函数在Jenkins管道中不起作用 Angular * not用于循环抛出对象时使用的管道不起作用

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Angular核心概念：过滤器

Angular核心概念：过滤器 博客首页：蔚说的博客欢迎关注点赞收藏⭐️留言作者水平很有限，如果发现错误，求告知，多谢！有问题可私信交流！！！...（达内教育学习笔记）仅供学习交流 AAngular核心概念：过滤器 Angular核心概念：过滤器自定义管道的步骤：创建管道对象的简便工具：Angular提供了几个预定义管道： Angular...核心概念：过滤器 自定义管道的步骤：创建管道对象的简便工具： Angular提供了几个预定义管道： Filter：过滤器，用于View中呈现数据时显示为另一种格式，过滤器的本质是一个函数接收原始数据转换为新的格式进行输出...：function（oldVal）{处理…return newVal} 使用过滤器：{{e.salary | 过滤器名}} Angular2.x中，过滤器更名为“管道（Pipe）” 自定义管道的步骤...在模板中使用管道 {{e.sex | sex}} //sex是管道名调用管道的时候可以使用：传递参数，如下 {{e.sex | sex:'en'}} 创建管道对象的简便工具

1.2K2 0

AngularJS简介

大家好，又见面了，我是你们的朋友全栈君。 AngularJS简介 AngularJS是一个JavaScript矿建，他是一个JavaSscript编写的库。...与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。创建自定义的指令你可以使用 .directive 函数来添加自定义的指令。...是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。...AngularJS 过滤器 过滤器可以使用一个管道字符（|）添加到表达式和指令中。 AngularJS 过滤器可用于转换数据： currency 格式化数字为货币格式。...向指令添加过滤器 过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。

5K2 0

4-进军 angular1.x 控制器和过滤器

过滤器 angular 的过滤器用于装换数据，其实类似于 vue1.x 的过滤器。一样的功能。...在表达式中加过滤器 uppercase 过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。...过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。...自定义一个翻转的字符 func var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) {...-- 多参数具体的操作就是在调用的时候用"：参数" 的格式在后面追加即可 var app = angular.module('myApp', []); app.controller('myCtrl'

1.9K3 0

Angularjs基础(四)

AngularJS过滤器　　　　过滤器可以使用一个管道符(|)添加到表达式和指令中。　　　　　　...表达式中添加过滤器 　　　　过滤器可以通过一个管道字符(|) 和一个过滤器添加到表达式中。　　　　　　uppercase过滤器将字符串格式化为大写。　　　　　　　　　　...　　　　　　过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中　　　　　　　　　　orderBy 过滤器根据表达式排列数组：　　　　　　　　　　　　　　实例：　　　　　　　　　　　　　　　　　　...，需要在定义过滤器的时候独立添加：　　　　实例：　　　　　　　　使用自定义的服务hexafy 将一个数组转换为16 进制。　　　　　　　　　　...，使用自定服务　　　　当你创建了自定义服务器，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服服务器中使用它。

2.9K9 0

第219天：Angular---过滤器

在Angular中，过滤器的功能主要是格式化数据表达式，且可以自定义过滤器。作用域(scope)主要服务于页面模板，在控制器和页面中起桥梁作用，保存模板中的数据对象，为模板中的元素提供方法和属性。...一、过滤器的表现形式在angular中有三种变现形式，通过管道字符 “ | ”，与需要处理的代码进行连接，看代码： 1、单个过滤器，如：{{表达式 | 过滤器名}} 货币过滤器 {{8.88...3、带参数过滤器,如：{{表达式 | 过滤器名1 : 参数1 : 参数2 : ...}} {{8.88 | number : 1}} 二、angular中自带的九种过滤器 1、currency格式化数字为货币格式...这东西有什么用呢，我一般也不会在页面上输出一个json串啊，官网说它可以用来进行调试，嗯，是个不错的选择。或者，也可以用在js中使用，作用就和我们熟悉的JSON.stringify()一样。...用法超级简单： 1 {{ jsonTest | json}} 三、angular自定义过滤器 方法： 1 app.filter('name', function() { 2 3 return

9724 0

Angular Pipe 快速入门

Angular 中 Pipe（管道）与 Angular 1.x 中的 filter（过滤器）的作用的是一样的。它们都是用来对输入的数据进行处理，如大小写转换、数值和日期格式化等。...管道可以接收任意数量的参数，使用方式是在管道名称后面添加 : 和参数值。...自定义管道的步骤：使用 @Pipe 装饰器定义 Pipe 的 metadata 信息，如 Pipe 的名称 - 即 name 属性实现 PipeTransform 接口中定义的 transform...总结本文介绍了 Angular 中的常用内建管道的用法和管道的分类，同时也介绍了 pure 和 impure 管道的区别。...此外我们通过两个示例展示了如何自定义管道，最后详细分析了 RepeatPipe 管道的工作原理。

1.5K2 0

了解 Angular 开发的内容

这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，阅读本文，是在你了解 Angular 基本知识的前提下，如果读者还不了解，请前往官网了解。...管道 Pipeline 管道你可以理解为过滤器。用过 vue 的读者应该对这个不默认。...date:'yyyy-MM-dd HH:mm:ss' }} {{ json_var|json }} {{ slice_var|slice:0:9 }} 当然，你还可以自定义管道...我们在 app 目录下 mkdir pipes 文件夹统一管理管道元件。...下面我们说的是自定义的指令。老样子，我们进入 app 目录，mkdir directives 文件夹统一管理指令。

1K4 1

Angular.js学习笔记（三）

currency }} // 结果：$250.00 {{ 250 | currency:"RMB ￥ " }} // 结果：RMB ￥ 250.00 5、filter查找输入过滤器可以通过一个管道字符...（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。...创建自定义服务你可以创建访问自定义服务，链接到你的模块中：创建名为hexafy 的访问: app.service('hexafy', function() { this.myFunc = function...(x) { return x.toString(16); } }); 要使用访问自定义服务，需要在定义过滤器的时候独立添加: 实例使用自定义的的服务 hexafy 将一个数字转换为16进制数: app.controller..., 也是一个单独发行的文件 - 安装或者下载angular-route的包 - 引入这个包 - 在自己的模块中添加 ngRoute 依赖 - 路由配置（配置路由规则） + 规则指的就是什么样的请求找什么控制器

8.2K2 0

【AngularJS】—— 4 表达式

前面了解了AngularJS的基本用法，这里就跟着PDF一起学习下表达式的相关内容。　　在AngularJS中的表达式，与js中并不完全相同。　　...首先它的表达式要放在{{}}才能使用，其次相对于javascript中的表达式概念，它有以下几点不同：　　1 作用域不同在javascript中默认的作用于是window，但是在angularJs...2 允许未定义的值在angularjs中，如果使用了未定义的表达式，也不会出现错误，直接返回空值。　　...3 过滤器 　　可以在表达式中使用 | 管道命令符，添加过滤器，与UNIX的命令行类似。　　4 $符号　　用以区别angular的方法与用户自定义的方法。　　下面看一段小代码： <!...；　　在表达式中，引用了未定义的test，但是并没有报错，直接默认显示为空；—— {{test}} 　　最后使用过滤器，将表达式中name的值转化成大写。

1.2K5 0

Angular 关于pipe

Angular 中的管道其实就是angularjs中的过滤器，用来转换数据然后显示给用户。要创建一个管道，必须实现 PipeTransform 接口。...使用管道的几个注意事项：管道可以链式使用，还可以传参 {{date | date: 'fullDate' | uppercase}} 管道分两种纯(pure)管道与非纯(impure)管道默认是...Angular 只有在它检测到输入值发生了纯变更时才会执行纯管道。...使用 impure 管道时候要小心，很可能触发非常频繁。也是出于性能的考虑。...Angular并没有提供 angularjs 自带的 Filter 和 OrderBy 过滤器，Angular官方推荐把过滤和排序放到组件中实现，比如对外提供filteredHeroes 或 sortedHeroes

1.5K3 0

AngularJS系列(三)——过滤器(filder)

本文链接：https://blog.csdn.net/luo4105/article/details/77894214 过滤器可以用一个管道字符’|’添加到表达式和指令中。...常用的过滤器有 l currency：数字转金额 l uppercase/lowercase：字符串转大小写 l date：时间格式化 l json：Json解析 l limitTo：字符串截取...| orderBy:'id':true"> {{x.id + "," + x.name}} 查询id为10的people...自定义过滤器 以下实例自定义一个过滤器 reverse，将字符串反转：姓名: {{ msg | reverse }...} var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) {

4832 0

AngularDart 4.0 高级-管道顶

介绍Angular管道，这是一种编写显示值转换的方法，您可以在HTML中声明这些转换。尝试一下实例（查看源代码）。使用管道管道将数据作为输入并将其转换为所需的输出。...请注意以下几点：您可以像使用内置管道一样使用自定义管道。您必须将自定义管道包含在@Component的pipes列表中。记住管道列表您必须手动注册自定义管道。...当你不能时，你可以使用不纯的管道。或者你可能根本不使用管道。用组件的属性来追求管道的目的可能会更好，这点在本页稍后会讨论。不纯的管道 Angular在每个组件更改检测周期执行不纯管道。...尝试编写一个自定义管道，并可能将其贡献给社区。附录：无FilterPipe或OrderByPipe Angular不提供过滤或排序列表的管道。...filter和orderBy都需要引用对象属性的参数。在本页面的前面，您了解到这些管道必须是不纯的，并且Angular在几乎每个变更检测周期都会调用不纯的管道。过滤和特殊分类是昂贵的操作。

6.3K2 0

11-angular 实例学习-2

alert($scope.adStyle) } }); script> 复制代码 filter 自建 // 我以一个将字符串折分成数组的过滤器举例...在页面上需要传两参数时，就在过滤器后面以冒号（:）隔开，如下面要传的分割器；在页面要实现传三个及以上的参数时，我们可以通过在过滤器后面继续加冒号（ :）和参数的格式添加。...总结就是，第一个参数是管道符号前面的数据，多个参数时，在过滤器名称后面以冒号隔开。...，可合并成一个校验的方法，我就不写了。...，可你进入人家的身体也不打声招呼，进了就进了，还搞得我那么难受，求你别搞了，给，芭~~~蕉~~~扇！")

2.2K4 0

【AngularJS】—— 9 自定义过滤器

AngularJS另一个特点就是提供了过滤器，可以通过操作UNIX下管道的方式，操作数据结果。　　通过使用管道，可以便于双向的数据绑定中视图的展现。　　...过滤器在处理过程中，将数据变成新的格式，而且可以使用管道这种链式风格，还能接受附加的参数。　　...实现方式　　下面看一下如何定义声明一个过滤器，首先依然是要创建我们自己的模块myAppModule var myAppModule = angular.module("myApp",[]); 　　接下来在模块的基础上...，创建过滤器： myAppModule.filter("reverse",function(){ }); 　　其中reverse是过滤器的名字，后面跟着过滤器的方法声明，在方法中返回另一个方法...，一个是输入的值，就是我们过滤器接受的值。

6406 0

angular4实战（4）ngrx

详情参考我之前的文章：http://blog.csdn.net/j_bleach/article/details/78070539。ngrx和react-redux本质没什么区别。...但自己本地没有把这段代码跑成功，未报错，但不起作用，就用做简单的方法来实现reducer的汇总。.../angular/2016/02/22/angular-2-change-detection-explained.html#observables 不知道是否需要访问外国网站，再贴一篇sf上的...高中英语水平翻译一下：async这个管道，会返回订阅的Observe ,promise对象的最新的值，当观察者发现值有改变时，就会触发组件的检查策略，并且在组件销毁时也会自动的去取消订阅避免内存泄漏。...在本例中，如果把async这个过滤器取消的话，会造成一直loading，因为组件无法在监听到控制loading值的改变，也就无法更新视图了。

1.1K3 0

借助 AngularJS 写优雅的代码

这其中的 Alert 就是通过 directive 实现的自定义的标签，最终可以被解析成具备“ 警告” 样式的 html，但是，在对于 directive 的定义上面，就连官网的例子都是...过滤器 AngularJS 的表达式功能比较弱，不支持条件判断和流程控制，不过好在支持过滤器，这就一定程度上弥补了这个缺憾。过滤器是个很有趣的特性，让人想起了管道编程。...到这里，开个玩笑，你大概也发现 AngularJS 真是一个到处抄袭，哦不，是借鉴各种概念和范型的东西，比如依赖注入抄 Spring，标签定义抄 Flex，过滤器抄 Linux 的管道： {{ "lower...$broadcast("DataChange", msg); }); 但是，这让我颇为不爽，如果我的两个视图在不同的 controller 内，我还非得要通过事件机制来保持同步的话，如此啰嗦，我还需要...Angular UI 文章未经特殊标明皆为本人原创，未经许可不得用于任何商业用途，转载请保持完整性并注明来源链接《四火的唠叨》

2.8K2 0

【AngularJS】 # AngularJS入门

大家好，又见面了，我是你们的朋友全栈君。 1....循环及异常支持过滤器 我的第一个表达式: { { 5 + 5 }} 2.1....AngularJS 过滤器 过滤器可以使用一个**管道字符（|）**添加到表达式和指令中。 6.1....自定义过滤器 自定义一个过滤器reverse，将字符串反转 app.filter("过滤器名称", function) 我是不可见的。 12">我是可见的。

23.2K6 0

达观数据对AngularJS技术的思考与实践

达观数据陈高星）本文主要涵盖：AngularJsMVC模型、$scope，controller和数据双向绑定（$apply(),$digest(),$watch）、module模块、AngularJs路由、过滤器和自定义过滤器...（filter）、服务和自定义服务（provider, factory，service）、指令和自定义指令（directive）、依赖注入（DI）、Angular继承。...我理解$scope类似于种子或者桥梁的角色，使controller可以获取数据模型的信息。 ?...五、过滤器和自定义过滤器filter： AngularJS过滤器用类似于管道的方式来格式化输出给用户的数据。除了格式化数据，过滤器还能修改DOM。...这使得过滤器通常用来做些如“适时地给输出加入CSS样式”等工作。例如： ? AngularJs允许自定义filter：在你的模块中注册一个新的过滤器（可注入的）工厂函数。

5.4K15 0

2-进军 angular1.x 表达式和指令

2-表达式和指令，数据绑定 angular1.x 学习目录 1-angular 学习导航和基础 2-表达式和指令，数据绑定 3-模型和作用域 scope 4-控制器和过滤器 一表达式 ng-init...tips 每个页面只有一个 ng-app 指令，多的不起作用 1.ng-app是一个特殊的指令，一个HTML文档只出现一次，如出现多次也只有第一个起作用；ng-app可以出现在html文档的任何一个元素上...创建自己的指令除了 AngularJS 内置的指令外，我们还可以创建自定义指令。你可以使用 .directive 函数来添加自定义的指令。...要调用自定义指令，HTML 元素上需要添加自定义指令名。...}; }); //restrict 值可以是以下几种: 复制代码总结一下 angular 自定义的几种写法 1、上面这种要清晰一下 // angular.module('MyApp',[]) //

2.4K2 0

angularjs学习第三天笔记（过滤器第二篇---filter过滤器及其自定义过滤器）

您好，我是一名后端开发工程师，由于工作需要，现在系统的从0开始学习前端js框架之angular，每天把学习的一些心得分享出来，如果有什么说的不对的地方，请多多指正，多多包涵我这个前端菜鸟，欢迎大家的点评与赐教...第三天，过滤器第二篇---filter过滤器及其自定义过滤器 一、filter过滤器　　filter过滤器我的理解就是一个筛选过滤器，主要是对集合数据进行筛选，其筛选条件支持字符串、对象、函数　　字符串...（有点自定义过滤器的效果）　　　　　　格式为：{{被筛选的集合对象|filter:‘筛选自定义函数名称’}} 　　关于filter筛选的小练习 <!...，很高兴见到大家"; }); 五、自定义 过滤器 　　自定义过滤器可以根据实际业务需要编写对于的过滤器逻辑　　定义格式为：　　　　app.filter("自定义过滤器名称...return 最终筛选的符合要求的结果　　　　 } 　　调用方式：{{待过滤对象|自定义过滤器名称:参数1:参数2....}} 自定义过滤器练习： <!

1.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭