Question

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

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}

和我在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>

这里主要是我面临的问题

如何设置表标题和数据动态目前我正在设置表标题静态假设如果表行不是那么我必须手动再次编辑文件
如果我设置动态标题和数据以及列，如何我可以找到该特定列的总数目前我将循环金额如果我得到 netamount 然后我怎么能总计那个
如果我必须使用像货币，日期，时间等管道，如何将其用于单个列

Answer 1

要设置为标题放入另一个ngFor的表格标题，您可以使用Object.keys(myObject)获取属性名称;或者您可以使用Object.getOwnPropertyNames(myObject)
如果您使用上述方法，则意味着您循环实际内容是独立的，我会计算出后面代码中的金额并在最后一列中插入值
当您决定添加可以添加日期的日期时，这应该非常简单

<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>

这是一个有助于https://plnkr.co/edit/Mzv8777npcxVkCmdx4Ka?p=preview

希望有所帮助

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

1 个答案: