时间戳

首页 > 解决方案 > 如何在 Ionic 应用程序中使用 Angular 格式化 json 输出到 dom 中？

angular - 如何在 Ionic 应用程序中使用 Angular 格式化 json 输出到 dom 中？

问题描述

我正在为离子应用程序设置一个视图，到目前为止一切正常，我正在将此数据输出到 dom。

{"total_number_machines":"167","chargine_machines":"67","defective_machines":"0","idle_machines":"100","total_revenue":"6565","todays_revenue":"800","total_number_of_bookings":"656","todays_number_of_bookings":"56"}

我想格式化它以提高用户可读性，例如机器总数：这里必须显示这个值（“total_number_machines”：“167”）

作为输出示例

Total Number Of machine:167

其余值相同我的家庭代码如下。

<ion-content>
  <div class="ion-padding">
    <p>Details</p>

    <div class="row">{{ data ? data : '-' }}</div>
    <ng-template #errorContent><p><span style="color: red;">{{error}}</span></p></ng-template>
  </div>
</ion-content>

我该怎么做呢？

标签： angularionic-framework

解决方案

使用内置的 JSON 管道。

例如：

<div>{{data | json}}</div>

角度 JSON 管道

对于漂亮的打印，您可以使用另一种方法KeyValuePipe：

<div *ngFor="let element of myArray"> 
    <!--element is an object-->
    <div *ngFor="let item of element|keyvalue">
        {{item.key}}:{{item.value}} <br/>
    </div>
</div>

角键值管

编辑：这是 Stackblitz 工作示例： 键值管道示例

推荐阅读