从网格列 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>

Answer 1

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

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

但是，在模板中包含逻辑通常是不好的做法。 在您的组件中创建一个 function 并从您的模板中调用它：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>

Answer 2

尝试使用 pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'total'
})
export class TotalPipe implements PipeTransform {
  transform(array: any): any {
    let total = 0;
    array.forEach(element => {
        total += element.totalPrice;
        // you may need to modify total price if it contains any currency and convert it into int
    });

    return total;
 }
}

并将其用于 html 文件，如

<h6>Total value: {{ orders | total }}</h6>