热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

ngForAngular2中的动态管道

如何解决《ngForAngular2中的动态管道》经验,为你挑选了1个好方法。

我正在编写Angular4应用程序。我有一个包含值和管道类型的数组。(地区,语言或号码)

const values = [
   { value: 'us', pipe: 'regions'},
   { value: 'en', pipe: 'language'},
   { value: '100', pipe: 'number'},
.....
];

我想制作一个ngFor,以便我可以显示值并应用正确的管道:(类似这样)

  • {{item.value | item.pipe}}
  • 我试图建立一个类:

    export class FacetConfiguration {
      value: string;
      pipe: Pipe;
    }
    

    然后将管道的对象注入类。但是没有用。

    有这种方法吗?或其他想法?

    PS我这样做的原因是,我有大量的配置列表,并且每个配置都有不同的管道类型,因此硬编码会很困难。

    谢谢



    1> Nima Hakimi..:

    我建议有一个主管道,该管道根据值决定要应用的管道:

    主管:

    const values = [
       { value: 'us', pipe: new RegionPipe},
       { value: 'en', pipe: new LanguagePipe},
       { value: '100', pipe: new NumberPipe},
    .....
    ];
    

    并在转换功能中:

    trasform(value): any {
       for(let val of values) {
          if(val.value === value) {
              return val.pipe.transform(value);
          }
       }
       return '';
    }
    

    您还可以将另一个管道作为选项传递给主管道:

    @Component({
      selector: 'my-app',
      template: `
        

    {{'some text'| main: test}}

    `, }) export class App { name: string; test = new TestPipe; constructor() { } } @Pipe({name: 'main'}) export class MainPipe implements PipeTransform { transform(value: any, p: any): any { return p.transform(value); } } @Pipe({name: 'test'}) export class TestPipe implements PipeTransform { transform(value: any): any { return 'test'; } }


    推荐阅读
    • 深入解析Spring启动过程
      本文详细介绍了Spring框架的启动流程,帮助开发者理解其内部机制。通过具体示例和代码片段,解释了Bean定义、工厂类、读取器以及条件评估等关键概念,使读者能够更全面地掌握Spring的初始化过程。 ... [详细]
    • 黑马头条项目:Vue 文章详情模块与交互功能实现
      本文详细介绍了如何在黑马头条项目中配置文章详情模块的路由、获取和展示文章详情数据,以及实现关注、点赞、不喜欢和评论功能。通过这些步骤,您可以全面了解如何开发一个完整的前端文章详情页面。 ... [详细]
    • 在高并发需求的C++项目中,我们最初选择了JsonCpp进行JSON解析和序列化。然而,在处理大数据量时,JsonCpp频繁抛出异常,尤其是在多线程环境下问题更为突出。通过分析发现,旧版本的JsonCpp存在多线程安全性和性能瓶颈。经过评估,我们最终选择了RapidJSON作为替代方案,并实现了显著的性能提升。 ... [详细]
    • 深入解析 Android IPC 中的 Messenger 机制
      本文详细介绍了 Android 中基于消息传递的进程间通信(IPC)机制——Messenger。通过实例和源码分析,帮助开发者更好地理解和使用这一高效的通信工具。 ... [详细]
    • 探讨ChatGPT在法律和版权方面的潜在风险及影响,分析其作为内容创造工具的合法性和合规性。 ... [详细]
    • 本题要求在一组数中反复取出两个数相加,并将结果放回数组中,最终求出最小的总加法代价。这是一个经典的哈夫曼编码问题,利用贪心算法可以有效地解决。 ... [详细]
    • 主调|大侠_重温C++ ... [详细]
    • 软件工程课堂测试2
      要做一个简单的保存网页界面,首先用jsp写出保存界面,本次界面比较简单,首先是三个提示语,后面是三个输入框,然 ... [详细]
    • 在尝试使用C# Windows Forms客户端通过SignalR连接到ASP.NET服务器时,遇到了内部服务器错误(500)。本文将详细探讨问题的原因及解决方案。 ... [详细]
    • 深入解析动态代理模式:23种设计模式之三
      在设计模式中,动态代理模式是应用最为广泛的一种代理模式。它允许我们在运行时动态创建代理对象,并在调用方法时进行增强处理。本文将详细介绍动态代理的实现机制及其应用场景。 ... [详细]
    • 由二叉树到贪心算法
      二叉树很重要树是数据结构中的重中之重,尤其以各类二叉树为学习的难点。单就面试而言,在 ... [详细]
    • 使用JS、HTML5和C3创建自定义弹出窗口
      本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
    • SpringMVC RestTemplate的几种请求调用(转)
      SpringMVCRestTemplate的几种请求调用(转),Go语言社区,Golang程序员人脉社 ... [详细]
    • 本文探讨了C++编程中理解代码执行期间复杂度的挑战,特别是编译器在程序运行时生成额外指令以确保对象构造、内存管理、类型转换及临时对象创建的安全性。 ... [详细]
    • 本文详细介绍了 Android 开发中 layout_gravity 属性的使用方法及其在不同布局下的效果,旨在帮助开发者更好地理解和利用这一属性来精确控制视图的布局。 ... [详细]
    author-avatar
    童T-Aurora
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有