解析深层 Json 文件并在前端 Angular 中显示数据答案

【问题标题】：Parsing a deep level Json file and displaying the data in the frontend Angular解析深层 Json 文件并在前端 Angular 中显示数据
【发布时间】：2021-05-02 18:36:07
【问题描述】：

我有一个格式为：数据 = {key1: value1, key2: [{key2_1: value2_1, key2_2: value2_2}], key3: value3, . . .键：值n}

我想使用 Angular 9 以以下方式解析深层 json 并在前端显示数据： key1 : value1\n （我使用 \n 表示新行） key2 : （任何间距或缩进） key2_1: value2_1\n key2_2: value2_2\n key3: value3\n 。 ..键：值如果有人可以提供帮助，我们将不胜感激。

Value: any;
Key: any;
this.Value = Object.entries(this.data)
this.Key = Object.keys(this.data)

<html>
<ul >
    <li *ngFor = "let i of Value">{{i}}</li>
</ul>
</html>

【问题讨论】：

能否提供更具体的代码sn-p？有很多方法可以做到这一点。
我已经添加了 html 和 typescript 文件。 ?我不能做一个深钱包。非常感谢您与我们联系。

标签： html json angular typescript angular9

【解决方案1】：

您可能可以使用 pipe 之类的 json 或创建自己的格式以获得更多格式：

<ul>
    <li *ngFor="let k of keys">
        {{k}}:{{data[k] | json}}
    </li>
</ul>

https://stackblitz.com/edit/angular-gbflt7?file=src/app/app.component.html

【讨论】：

感谢您与我分享代码！我认为这不完全是我在看的。对于嵌套的键、值对，我还想要任何类型的缩进或换行符，而不是将整个内容解析为 json。它看起来会很有趣。
@PriyankarBose 我认为一个不错的选择是让您创建自己的自定义管道。通过这样做，您将提供一种一致的方式来在未来的其他组件中处理此问题。
！感谢您的回复！你能举一个制作管道的例子吗？我想让它通用。