angular - 从网格列 Ionic 4 获取总值

Question

有人可以帮我解决这个问题。我想得到最后一列值的总值。下面是我的 HTML 代码。

  <div *ngFor="let order of orders |filter:searchText">
  <ion-row>
    <ion-col>
      <ion-text>
        {{order.OrderNo}}
      </ion-text>
    </ion-col>
    <ion-col>
      <ion-text>
        {{order.CustomerName}}
      </ion-text>
    </ion-col>
    <ion-col>
      <ion-text>
        {{order.PaymentType}}
      </ion-text>
    </ion-col>
    <ion-col>
      <ion-text>
        {{order.TotalPrice | currency:''}}
      </ion-text>
    </ion-col>
  </ion-row>
</div>
<h6>Total value: </h6>

标签： angularionic-frameworkionic4rest

Answer 1

您可以在模板中使用 javascript，例如：

<h6>Total value: {{ orders.reduce((acc, nxt) => acc + nxt) | currency:'' }}</h6>

但是，在模板中包含逻辑通常是不好的做法。在您的组件中创建一个函数并从您的模板中调用它：example.component.ts

// replace any with actual type
sum(orders: any[]): number {
   return orders.reduce((acc, nxt) => acc + nxt);
}

example.component.html

<h6>Total value: {{ sum(orders) | currency:'' }}</h6>