Javascript 使用JsonPipe在angular中更正缩进json

我有一个模拟JS对象，我想显示为JSON。这就是目标

  public theObject: any = {
    additionalProp1: {
      additional_data: {
        additionalProp1: 'string',
        additionalProp2: 'string',
        additionalProp3: 'string',
      },
      type: 'string',
      value: 'string',
    },
    additionalProp2: {
      additional_data: {
        additionalProp1: 'string',
        additionalProp2: 'string',
        additionalProp3: 'string',
      },
      type: 'string',
      value: 'string',
    },
    additionalProp3: {
      additional_data: {
        additionalProp1: 'string',
        additionalProp2: 'string',
        additionalProp3: 'string',
      },
      type: 'string',
      value: 'string',
    },
  };

位于.ts文件中的。在HTML中，我将数据显示为JSON：

<div class="card-scrollable" style="background-color: #f2f2f2;">
    <pre>{{ theObject | json }}</pre>
</div>

{{theObject | json}}

工作正常，但压痕不正确，如图所示：

我希望得到这样的缩进：

我阅读了JsonPipe的文档，但找不到一个能够正确获取缩进的选项

你知道如何做到这一点吗

管道是一个具有单线的变换函数：

转换（值：任意）：字符串{
返回JSON.stringify（值，null，2）；
}

您可以编写一个简单的函数来增加函数的

空间

参数。试试下面的方法

控制器

toString（值：任意）{
return JSON.stringify（value，null，4）；//非常明智的观察，非常感谢！从现在起，我将开始研究实现，因为您！
toString(value: any) {
  return JSON.stringify(value, null, 4);     // <-- `space` increased from 2 to 4
}