在Html中以角度显示JSON文件

我试图在html文件中打印JSON（）

JSON:

{
  "ricette": {
    "FRIGGITRICI": {
      "Alici": [
        [
          {"500": "scongelamento"}
        ],
        [
          {"60": "nada"}
        ]
      ],
      "Baccalà": [
        [
          {"500": "scongelamento"}
        ],
        [
          {"210": "immerso"},
          {"210": "cestello su"},
          {"30": "immerso"}
        ]
      ]
    },
    "GRIGLIA": {
      "Baccalà": [
        [
          {"500": "scongelamento"}
        ],
        [
          {"210": "immerso"},
          {"210": "cestello su"},
          {"30": "immerso"}
        ]
      ]
    }
  }
}

我已获取并保存在一个变量中：

export class DatiService {
  fileJson: JSON;

  constructor() { }

  private datiUrl = 'https://api.myjson.com/bins/zbfh5';

  async getDati(){
    await fetch(this.datiUrl)
    .then(res => res.json())
    .then((out) => {
      this.fileJson=out;
    });
    console.log(this.fileJson);
  };
}

如何在html代码中打印它？ 我可以使用de“.”在其字段中输入吗？ 或者更复杂？

您可以在模板中使用

{{fileJson | json}}

如果要打印特定零件，可以通过

深入对象结构进行导航

{{fileJson.ricette.FRIGGITRICI | json}}

如果您想打印一个primitiv值，插值就足够了，不需要json管道

{{fileJson.version}}

更新

您是否调用了

getDati

函数？添加一个ngOnInit并在那里调用它。是一个工作的stackblitz示例

---

我刚刚意识到这是您示例代码中的一项服务。获取服务并将其注入到组件中并在组件中调用。

我们可以使用pre-tag在HTML中查看JSON数据 在var数据中传递JSON。 并在HTML正文中设置预标记

var data = {Your JSON Object}
$("#json").innerHTML = JSON.stringify(data, undefined, 2);
<pre id="json"></pre>

var data={您的JSON对象}
$（“#json”）.innerHTML=json.stringify（数据，未定义，2）；

我的代码中没有任何内容。。。fileJson和fetch不在html文件中，我用完整的工作示例更新了答案。