Angular 2:设置和删除自定义管道?

2024-02-17

我创建了三个自定义管道来从服务器订购数据(ASC、DESC 和默认),它们工作得很好,我希望这三个管道是否处于活动状态,具体取决于用户的交互。

问题是,例如,是否可以使用变量更改自定义管道?

这是我的代码...

<label *ngFor="let user of users | {{pipeOrderType}}:'name'">{{user.id}}{{user.name}}, </label>

无法动态分配不同的管道。 您可以创建一个根据参数而表现不同的管道

@Pipe({
  name: 'dynamicPipe'
})
class DynamicPipe implements PipeTransform {
  transform(value, pipe) {
    if(!value || !pipe) {
      return null;
    }
    return pipe.transform(value);
  }
}

管道可以用在什么地方

<label *ngFor="let user of users | dynamicPipe:pipe">{{user.id}}{{user.name}}, </label>

在这里pipe是对管道类的实际实例的引用,而不是字符串。 您可以将管道注入到您的组件中,例如

class MyComponent {
  constructor(private pipe1:Pipe1, private pipe2:Pipe2) {}

  clickHandler() {
    if(xxx) {
      this.pipe = this.pipe1;
    } else {
      this.pipe = this.pipe2
    }
  }
}

您还可以将管道注入dynamicPipe

@Pipe({
  name: 'dynamicPipe'
})
class DynamicPipe implements PipeTransform {
  constructor(private pipe1:Pipe1, private pipe2:Pipe2) {}

  transform(value, pipe) {
    if(!value || !pipe) {
      return null;
    }
    if(pipe == 'pipe1') {
      return pipe1.transform(value);
    }
    if(pipe == 'pipe2') {
      return pipe2.transform(value);
    }
  }
}

然后将其与管道名称一起使用

<label *ngFor="let user of users | dynamicPipe:pipe">{{user.id}}{{user.name}}, </label>

Where pipe is 'pipe1' or 'pipe2'

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

Angular 2:设置和删除自定义管道? 的相关文章

  • Angular 应用程序在 IE 中为空页面,但在 Chrome 中工作

    我已经开始学习了Angular 4并使用编写了一个默认应用程序Angular CLI NG New HelloWorld 当我写的时候ng serve 然后浏览至http localhost 4200 页面加载正常Chrome 然而在IE
  • Pako 无法压缩 python 中生成的 gzip 文件

    我使用以下代码从 python 生成 gzip 文件 使用 python 3 file gzip open output json gzip wb dataToWrite json dumps data encode utf 8 file
  • 如何在 angular2 组件中导入 npm 包?

    我正在尝试学习 ng2 的诀窍 但依赖注入系统快要了我的命 我正在使用 ng 快速入门 https github com angular quickstart blob master README md https github com a
  • 解析器中的链相关可观察量

    我有一个解析器 需要在加载页面之前从两个依赖的 API 获取数据 第二个调用是由第一个调用的结果定义的 因此我尝试链接两个可观察量 并且需要在解析器末尾返回第二个可观察量 在我尝试链接可观察量之前 我有 resolve route Acti
  • dup2() 和 exec()

    include
  • 如何使用 Angular CLI 添加应用程序范围的 CSS 文件?

    我想向我的 Angular 2 应用程序添加一些分片样式 例如字体和配色方案等将在任何地方使用的东西 过去 我总是通过在索引页面添加这样的标签来完成此操作 这不适用于 CLI 用于为应用程序提供服务的任何内容 我尝试在构建后手动将 css
  • 为什么 Angular 4.3 中的 httpclient 返回 Object 而不是 any?

    Angular 4 3 中的新 HttpClient 类似乎又回来了Object代替any默认情况下 鉴于打字稿文档所述 这样做是否有特殊原因 永远不要使用数字 字符串 布尔值或对象类型 这些 类型指的是几乎从未使用过的非原始装箱对象 适当
  • 如何在菜单中显示用户名

    我有一个 user name 我的 app component ts 中的变量 我想用它来显示用户登录后从本地存储获取的用户名 但这仅在应用程序启动时加载 我想在用户登录后重新加载它 当我在登录后关闭并重新打开应用程序时 它工作正常并显示用
  • 如何连接我的 angular2 应用程序 javascript 文件

    对于我的 Angular2 TypeScript 应用程序 我将所有 js 文件合并到一个 app min js 文件中 然后 System import 将此文件导入到我的 index html 页面 然后我得到一个同一模块文件中的多个匿
  • 在 Angular 7 项目中读取来自第三方服务器的 SAML 响应

    我已经创建了一个角 7项目 http myproject com 如果用户未登录 我会将用户重定向到另一个安全身份验证服务器 https secureauth com 登录 这里提示输入用户名和密码 然后检查用户凭据 一旦用户成功登录到安全
  • router.navigate 更改 URL,但不渲染组件

    而不是使用 a href my path my param a 在我的模板中 我愿意使用带参数的函数将我重定向到页面 所以 这就是我在 ts 文件中构建函数的方式 redirectToChat my param this router na
  • 是否可以在 Ionic 2 中存储 firebase 数据并以离线模式运行应用程序功能?

    我找到了一些关于 Ionic 2 离线模式 firebase 的教程 但我仍然不知道如何在我的应用程序中启用这个功能 那么 firebase真的支持离线模式吗 如果是 我可以存储所有收到的数据吗 and 在离线模式下运行功能 firebas
  • Angular 2 形式 + OnPush

    我正在编写一个 Angular 2 应用程序 出于性能原因 我尝试在任何地方使用 ChangeDetectionStrategy OnPush 我有一个复杂的组件 需要 OnPush 才能顺利工作 其中包含另一个显示表单的组件 使用 For
  • Angular 4 在 APP_INITIALIZER 中注入路由

    我正在尝试检索 APP INITIALIZER 中 url 中存在的数据 应用程序模块 ts export function init config ConfigService router Router return gt config
  • 使用许多嵌套的 switchMap 是不好的做法吗?

    我有 HTTP 拦截器 在该拦截器中 在更改请求之前 我需要打开一个加载程序 真正让我担心的是我最终会得到很多switchMaps why 加载器是异步的 我还需要将从拦截器传递的消息转换为加载器服务 翻译消息也是异步的 在拦截器中 我应该
  • 是否可以使用纯 css 禁用 mat-tab 动画

    我想禁用 Angular Material mat tab 动画 内容滑入到位时发生的动画 我知道可以使用 disabled 属性 但我想知道是否可以使用纯 css 达到相同的效果 EDIT 我们的用户体验团队希望从材质选项卡中删除幻灯片动
  • Bash:替换管道标准输入中的子字符串

    我尝试用新的子字符串替换标准输入中的某个子字符串 在读取几个文件后 我必须从管道获取标准输入cat 然后我想将更改后的字符串向前推到管道中 这是我尝试做的 cat file1 file2 echo cat path to file path
  • Angular 反应式表单:使用单个 formControlName 同步多个输入

    我正在建造一个反应形式 https angular io guide reactive forms在 Angular 11 中 它分为多个 div 项目所有者希望在每个 div 中进行一些重复输入 以便用户可以编辑某个字段 A 的输入 并且
  • 将打字稿中的字符串转换为时间格式

    我必须将服务器数据转换为字符串格式13 47 to 01 47PM但我正在尝试 time date hh MM and task time date shortTime 但它显示日期管道错误和参数错误 运行时错误 InvalidPipeAr
  • 如何检查 Angular 7 中的输入字段是否处于焦点[重复]

    这个问题在这里已经有答案了 我有一个表单 我想知道表单中的任何输入字段是否获得焦点 我读了 NgForm 文档但没有找到任何相关的 focus I found touched但它不能满足需求 您可以使用焦点和模糊事件来跟踪字段获得或失去焦点

随机推荐

  • 如何在 TypeScript 中声明具有属性的函数的类型?

    我在 TypeScript 网站上阅读了一些文档 但不确定我是否理解正确 在这种情况下 我使用的包没有可用的 TypeScript 类型 prismic reactjs 所以我试图自己声明类型 这样我就可以摆脱困扰我的项目的错误 那么 作为
  • “null this”是否可以接受扩展方法的使用? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 使用 Rails 定期计费 - 我有哪些选择?

    在开始之前 我想知道我的所有选择是什么 如果可能的话 它们的优点和缺点 我知道的两个正在使用 ActiveMerchant 或 paypal recurring gem 但它们会满足这些要求吗 能够适应按月和按年计费 能够暂停 取消帐户等
  • 20 多天后由于碎片而导致 Android 出现内存不足错误

    我制作了一个在咖啡机上运行的应用程序 20 多天后 可能是 60 多天 具体取决于使用情况 发生 OutOfMemoryError java lang OutOfMemoryError Failed to allocate a 604 by
  • 在 Android 上滑动即可切换标签,例如 YouTube/Google Music 应用

    在最新版本的应用程序中 谷歌实现了一种非常酷的方式 可以在选项卡之间滑动而不是单击选项卡标题 我想知道是否有人对如何做到这一点有更具体的想法 以下是一些想法 欢迎批评 我最初的想法是这不是一个标准TabActivity举办儿童活动 事实上
  • 使用 ftrace 和 kprobes 捕获用户空间程序集(通过使用虚拟地址转换)?

    对于这篇较长的帖子表示歉意 我无法以较短的方式表述它 另外 也许这更适合 Unix Linux Stack Exchange 但我会首先在这里尝试 因为有一个ftrace tag 无论如何 我想观察用户程序的机器指令在完整的上下文中执行fu
  • 方法“[]”在 null 上调用。接收者:空

    为了隔离问题 我创建了一个新代码 一个新程序和一台新机器 相同的结果 它只是不想打印 quotes 之后且具有 anythingPrice 的任何值 我再次可以给您一个临时密钥 您可以完全运行代码 在你身边 请告诉我 import dart
  • AS3 中 onReleaseOutside 最简单的实现?

    我是 ActionScript 2 的长期用户 现在开始使用 ActionScript 3 我缺少的一件事是复制 AS2 MovieClip onReleaseOutside 功能的简单方法 几乎总是有必要实现这个事件 否则你会得到一些有趣
  • Http 请求仅在发布 Android APK 时失败

    我正在努力让我的应用程序在 Android APK 版本上运行 唯一失败的情况是生成和签名 apk 所有的http请求都不起作用 服务器在SSL下运行 我已经尝试过的所有场景 ionic serve gt 工作正常 ionic cordov
  • Gstreamer - Android 上的硬件加速视频解码

    我在 Android 手机上通过 RTP UDP 接收视频 但我发现 CPU 使用率非常高 几乎 100 的一个核心都用于解码视频 在高端设备上 视频播放几乎流畅 但在中低端设备上 我几乎每秒无法获得 1 帧 这是一个 H 264 视频流
  • WebApi 中的 Windows 任务计划程序或 TaskService 函数

    我想在 ASP NET Web API 中创建一些函数 这些函数应该每天在特定时间执行并执行特定任务 例如更新状态 记录 生成电子邮件 短信 我应该在代码中创建一个 TaskService using System using Micros
  • 为什么我的 unique_ptr 认为有一个空函数指针删除器? [复制]

    这个问题在这里已经有答案了 我正在尝试使用 C 学习 SDL 我创建了一个window h标头和一个window cpp用于存储 Window 类的源文件 在window h它看起来像这样 Class Window public Windo
  • 如何在 MongoDB 中对 $filter 结果进行 $slice ?

    我有一个具有以下格式的集合 id 123 items status inactive created ISODate 2016 03 16T10 39 28 321Z status active created ISODate 2016 0
  • 将 SVG 和 .JPG 合并为一张图像?

    我有一个在地图应用程序中使用 SVG VML 通过 Raphael JS 设置的网站 其中 SVG 用于在背景地图图像上显示图形 这在屏幕上非常有效 并且可以打印带有叠加层的硬拷贝地图 然而 当用户想要将带有 SVG 叠加层的地图图像保存到
  • 如何使用 ELKI 中的索引结构?

    这些是报价形式http elki dbs ifi lmu de http elki dbs ifi lmu de 本质上 我们将抽象距离查询绑定到数据库 然后对该距离进行最近邻搜索 此时 ELKI 将自动选择最合适的 kNN 查询类 如果我
  • 使用 VB.NET 连接到 socket.io

    我有一个在 Heroku 上运行的应用程序 它使用套接字 io http socket io 与客户沟通 到目前为止 所有客户端都是 HTML JS 所以效果很好 现在我想用 Visual Basic 编写一个客户端 但我找不到任何其他人编
  • 查看 Chrome 控制台是否打开

    我正在使用这个小脚本来查明 Firebug 是否打开 if window console window console firebug is open 而且效果很好 现在我搜索了半个小时 想找到一种方法来检测Google Chrome内置的
  • 装饰器运行错误:“UnboundLocalError:赋值前引用的局部变量‘count’”

    我在两个不同的装饰器中创建了两个变量 一个装饰器工作正常 但另一个显示错误 def running average func data total 0 count 0 def wrapper args kwargs print data v
  • 理解扩展 ElementAt(index)

    考虑这段代码 int size 100 1000 1000 var emu Enumerable Range 0 size var arr Enumerable Range 0 size ToArray 当我调用 emu ElementAt
  • Angular 2:设置和删除自定义管道?

    我创建了三个自定义管道来从服务器订购数据 ASC DESC 和默认 它们工作得很好 我希望这三个管道是否处于活动状态 具体取决于用户的交互 问题是 例如 是否可以使用变量更改自定义管道 这是我的代码