是否有 Angular 的 json 格式化程序(指令/组件)?

2024-04-13

我正在将应用程序从 AngularJS 升级到 Angular。在 AngularJS 中我使用了https://github.com/mohsen1/json-formatter https://github.com/mohsen1/json-formatter显示美化的 json。有角度的替代品吗?


您可以使用json 格式化程序-js https://github.com/mohsen1/json-formatter-js package

import JSONFormatter from 'json-formatter-js';

@Directive({
  selector: 'json-formatter'
})
export class JsonFormatterDirective implements OnChanges {
  @Input() json: any;

  constructor(private elRef: ElementRef) { }

  ngOnChanges() {
    if (this.json) {
      const formatter = new JSONFormatter(this.json);
      this.elRef.nativeElement.appendChild(formatter.render());
    }
  }
}

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

或为 angular2 创建相同的组件

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

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

是否有 Angular 的 json 格式化程序(指令/组件)? 的相关文章

随机推荐

  • 在 C++ 中什么时候使用向量,什么时候使用数组?

    我通常不确定什么时候使用其中一种更好 一般来说 它们似乎都做同样的事情 但就其功能而言 向量是否更灵活 什么时候数组比较合适 通常总是更喜欢使用std vector
  • 所需示例:将 arrow() 与 ggplot2 一起使用

    我想创建一个 geom path 它的箭头指向路径中的下一个位置 我可以毫无问题地获取绘图路径 例如 df lt x 1 12 y 20 31 z 1 12 p lt ggplot df aes x x y y p geom point g
  • 如何在apache服务器中部署ember-cli项目

    我有以下问题 我使用 ember cli 创建了一个 ember 应用程序 该应用程序通过 url 在 nodejs 上运行良好http localhost 4200 运行命令时ember serve 我想在 apache httpd 服务
  • 如何最好地“合并”两个对象及其在 Rails 中的关联?

    这是我的情况 我有 2 个人员对象 人员 1 和人员 2 它们是从两个不同的外部数据源创建的 我使用的手动流程已确定 person1 和 person2 实际上指的是同一个人 因此我想要做的是将它们 合并 为一个人 并删除重复项 我对对象本
  • Nginx + phpFPM:PATH_INFO 始终为空

    我在 Debian 上配置了 nginx stable 1 4 4 PHP 使用 FastCGI php fpm 效果很好 location php fastcgi split path info php alias home 1 publ
  • 获取 .NET Web 应用程序中的当前目录

    所以我有一个网络项目 我试图使用c 方法获取网站的根目录Directory GetCurrentDirectory 我不想使用静态路径 因为文件位置将来会发生变化 此方法在我的 imageProcess aspx cs 文件中运行 但我认为
  • 如何在 RichTextBox 中附加 RTF 文本,Win C#

    我在 Win C 中有一个 RichTextBox 我想在 RichTextBox 中附加一些具有粗体效果的新文本 那么我该怎么做呢 I tried string str richTextBox Rtf my logic str rtf1
  • 通过 Oracle 连接

    这是一个示例表数据 Fruit Number Apple 1 Apple 2 Apple 3 Kiwi 6 Kiwi 10 我尝试连接表列值以获得以下内容 Fruit Number Apple 1 2 3 Kiwi 6 10 有没有办法查询
  • SQLException:oracle 中的协议冲突

    我收到 违反协议 的消息 我有一个在 RedHat Linux 上运行的应用程序 数据库和应用程序共同驻留在计算机上 使用的Oracle版本 Oracle 11g R2 11 2 0 3 0 使用的 JDBC 驱动程序 12 1 0 1使用
  • 无符号字符的格式说明符

    说我要打印unsigned char unsigned char x 12 哪个是对的 这 printf d x or this printf u x 事情在其他地方 所以我遇到了这样的讨论 即使 ch 更改为 unsigned char
  • 为什么这里除以零没有触发异常?

    这是一个后续问题为什么这个异常没有打印出来 为什么显示错误 https stackoverflow com questions 12130659 why is this exception is not printed why is it
  • 鉴于 GPU 有任务队列并且是异步的,计算 FPS 的正确方法是什么?

    我始终认为计算 FPS 的正确方法是简单地计算绘制循环迭代所需的时间 互联网上的大部分内容似乎都是一致的 But 现代显卡被视为异步服务器 因此绘制循环会发出 GPU 上已有的顶点 纹理 等数据的绘制指令 这些调用不会阻塞调用线程 直到 G
  • 带分隔符的 Flutter 组列表视图

    我正在寻找一些指导来创建带有分隔符的列表视图 例如 我想从按日期分组的数据库中获取消息 并用一些图形或线条等按日期分隔消息 然后将消息放在分隔符下 在颤振中尝试这一点 任何正确方向的指导或推动将不胜感激 简单地说ListItem into
  • MaterialiseCSS 中的砌体

    我想知道是否有任何方法可以在类似砖石的显示器中显示 MaterializeCSS 卡片 我想避免像 masonry 这样的插件 或者必须编译 sass 因为这将在 aurelia 应用程序上使用 而外部库的配置等让我非常痛苦 我遇到过的最接
  • 错误代码尝试从不存在的源进行复制

    因为我在这里关注 VS code 插件 扩展教程您的第一个扩展 Visual Studio 代码扩展 API https code visualstudio com api get started your first extension
  • ArrayList 未在 onChildAdded 函数内更新

    public class DataService private static DataService ourInstance new DataService private DatabaseReference mDatabase publ
  • execvp 返回后,为什么我的程序没有从中断处继续执行?

    我有一个像这样的代码块作为子线程运行 if someVar 1 doSomeStuff exit 0 else execvp temp gt arguments temp gt arguments printf I m done n 当我使
  • 如何在 SVG 中创建无限动画循环

    我是 SVG 动画新手 我尝试将组元素旋转 8 次 45 45 90 135 180 225 270 315 360 下面的示例对我来说效果很好 但是如何创建整个动画的无限循环 现在它只运行一次 我对其他可能性持开放态度 提前致谢
  • 无法在通知服务扩展中使用 pod

    我正在创建一个通知扩展 按照规范添加目标并在其中添加一个 pod 如下所示 Step 1 target MyProject do Integration Frameworks pod Fabric pod Crashlytics pod M
  • 是否有 Angular 的 json 格式化程序(指令/组件)?

    我正在将应用程序从 AngularJS 升级到 Angular 在 AngularJS 中我使用了https github com mohsen1 json formatter https github com mohsen1 json f