从网格列 Ionic 4 获取总值

Question

Can someone help me to solve this issue. I want to get the total value of the last column value. below is my HTML code.

  <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

You can just use javascript in your template like:

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

However, having logic in your template is generally bad practice. Create a function in your component and call it from your template: 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

try using 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;
 }
}

And use it into html file like

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