如何使用 Ionic 2/3 在角度 2/4 中动态设置表格标题和数据

Question

目前我正在获得以下 json 格式的动态数据，我显示在离子网格中

数据

{Type: "USD",Amount: 131295.21}
{Type: "Master",Amount: 11773.89}
{Type: "PAID",Amount: 51375.3}
{Type: "PAID",Amount: 25558.9}
{Type: "Visa",Amount: 15715.75}
{Type: "ZOM",Amount: 64771.55}

和 im 显示在 HTML 文件中，如下所示

<ion-grid>
      <ion-row >
        <ion-col>
         Type
        </ion-col>
        <ion-col text-right>
          Amount
        </ion-col>
      </ion-row>
      <div >
      <ion-row *ngFor="let value of resultData">
        <ion-col>
          {{value.Type}}
        </ion-col>
        <ion-col text-right>
          {{value.Amount|number:'.2'}}
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          Total
        </ion-col>
        <ion-col text-right>
          {{TotalAmount|number:'.2'}}
        </ion-col>
      </ion-row>
        </div>
    </ion-grid>

这里主要是我面临的问题

1. 目前如何设置表标题和数据动态我正在静态设置表格标题假设如果表格行不是，那么我必须再次手动编辑文件

如果我

2. 设置动态标题和数据以及列，我目前如何找到该特定列的总计，如果我获得净金额，我将来循环金额，那么我该如何总计

3. 如果我必须使用诸如货币，日期，时间等管道，如何将其用于单个列

Answer 1

1. 要设置放入另一个ngFor中的表标题，您可以使用Object.keys(myObject)获取属性名称;或者您可以使用Object.getOwnPropertyNames(myObject)

2. 如果您使用上述方法，则意味着您循环实际内容是分开的，我会计算出后面代码中的金额并在最后一列中插入值

3. 当您决定添加日期时，这应该非常简单，您可以添加它

   <ion-row *ngFor="let value of resultData"> <ion-col> {{value.Type}} </ion-col> <ion-col text-right> {{value.Amount | currency:'USD':true:'4.2-2'}} </ion-col> <ion-col text-right> {{value.Date | date:'shortTime'}} </ion-col> </ion-row>

这是一个 plunker 示例家庭，它有助于 https://plnkr.co/edit/Mzv8777npcxVkCmdx4Ka?p=preview

希望有帮助