Question

因此，在我询问之前，我努力寻找任何解决方案。

我有一个巨大且相当随机的json，就像它不是随机的一样，但有时您可以使用或不使用特定字段来获取它，有时这些字段嵌套有不同类型的数据（有时可以是数组/字符串/另一个对象，等等。）

在网上阅读了一些关于有角管道的信息之后，我只是尝试创建一个内部带有管道的html模板，以呈现json中的数据，但是它起作用。.

我想呈现例如json的数据：

[
    {
        "id": "XXX",
        "version": 1,
        "head": {
            "text": "Main title",
            "sub": {
                "value": "next"
            },
            "place": "secondary"
        },
        "body": [
            {
                "id": "XXX1",
                "info": "three little birds",
                "extended": {
                    "spl": {
                        "text": "song",
                        "type": {
                            "value": "a"
                        }
                    }
                }
            },
            {
                "id": "XXX2",
                "info": [
                    "how are you?"
                ],
                "extended": {
                    "spl": {
                        "text": "just"
                        "non-type": {
                            "value": "abc"
                        }
                    }
                }
            }
        ]
    }
]

使其以类似html的格式显示：

<div class="head">
  <div *ngFor="let head of heads">
    <span class="headTitle">
      <h3>{{Head Title}}</h3>
    </span>

    <div *ngFor="let sub of subs">
      <span>[{{sub-value}}]&nbsp;</span>
    </div>

    <div *ngFor="let place of places">
      <span>{{place}}&nbsp;</span>
    </div>

    <div *ngFor="let body of bodys">
      <div class="extended">
        <div class="spl">
          <span>{{text}}&nbsp;</span>
          <span>{{type}}&nbsp;</span>
          <span>{{non-type}}&nbsp;</span>
        </div>
      </div>
    </div>

有可能以相同的顺序获取数据，即使其数组或对象位于字段中！就像我说的那样，可以嵌套很多变体，所以我需要为每种类型编写验证器。但是如何控制数据的显示？分成碎片渲染

Answer 1

如果只希望对象以JSON显示（不带格式），则可以使用Angular的json pipe。

如果您想漂亮地打印JSON（带有换行符/缩进），则必须自己实现/使用包。一个简单的漂亮管道可以通过以下方式来完成（只是提出了）：

@Pipe({
  name: 'prettyjson'
})
export class PrettyJsonPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return JSON.stringify(value, null, 4)
    .replace(/ /g, '&nbsp;')
      .replace(/\n/g, '<br/>');
  }

}

然后按如下所示在模板中使用它

<div [innerHTML]="myJSON | prettyjson"></div>

不能找到将json显示为html的正确方法

1 个答案: