我如何计算 angular 2+ 中 table 列的总和？

Question

我有一个 table 正在根据用户选择进行动态过滤（管道）。

我需要在底部输入一个摘要行，以显示 item.total 列的总和。这是代码，最好的实现方式是什么？

  <tbody>
      <tr class="newLine" *ngFor="let item of records | filter:profile | location:selectedRegion ">
        <td scope="row">{{item.name}} </td>
        <td scope="row">{{item.profile}} </td>
        <td scope="row">{{item.location}} </td>
        <td scope="row">{{item.numOfTags}}</td>
      </tr>
      <tr>{{total numOfTags??}}</tr>
  </tbody>

Answer 1

创建一个新的过滤器管道，计算与当前过滤器的总和

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filtercount'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if(!items) return [];
    if(!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter( it => {
      return it.name.toLowerCase().includes(searchText);
    }).reduce((a, b) => a.total + b.total, 0);
   }
}

并像这样使用它

{{records | filtercount:profile}}

Answer 2

我找到了另一种方法来以更好的性能重现您的代码这是代码：

<div    *ngFor="let item of records | yourfilterChain;let last=last;let sum=ngForOf.reduce((a,b)=>a+b,0)" >
     {{item}}
     <div *ngIf="last">{{sum}} </div>
</div>

你可以用ngfor里面的箭头函数计算过滤结果的总和

Answer 3

这是一项非常简单的任务，但大多数 UI 开发人员都停留在这一点上。那么我们来讨论一下吧。

如果我们已经从任何 Web 服务获得响应（JSON 格式），即对象数组-

0: {REFUND: 0, PAYMENTCANCELLED: 0, PENDING_RECHARGE: 11, OUTLIER: 0, CHANNEL: "JIO.COM", …}
1: {REFUND: 0, PAYMENTCANCELLED: 65, PENDING_RECHARGE: 0, OUTLIER: 0, CHANNEL: "JIO.COM", …}
2: {REFUND: 0, PAYMENTCANCELLED: 31, PENDING_RECHARGE: 393, OUTLIER: 0, CHANNEL: "MYJIO", …}
3: {REFUND: 0, PAYMENTCANCELLED: 319, PENDING_RECHARGE: 1, OUTLIER: 0, CHANNEL: "MYJIO", …}

让我们考虑一下上面的响应是在 like

中加载的

this.FttxRechargeReportRes = response.responsePayload;

以上的事情很普遍，大家都能理解。现在，获取各个键的每个值的总和。

  getSum(){
    debugger;
    console.log(this.FttxRechargeReportRes );
    let sumArr = this.FttxRechargeReportRes .reduce((acc, cur) => {
      for (let key in cur) {
        // console.log(key, cur, acc);
        if (key !== 'RTYPE' && key !== 'CHANNEL') {  // "We did this because there was only characters in RTYPE & CHANNEL , so we could not get sum of same."
          if (acc[key]) {
            acc[key] += cur[key]
          } else {
            acc[key] = cur[key]
          }
        }
      }
      return acc;
    }, {})

    console.log(sumArr);
this.arrData=sumArr;
console.log(this.arrData);


  }

当您打印 arrData 时，您将得到以下输出：-

{
REFUND: 0
PAYMENTCANCELLED: 415
PENDING_RECHARGE: 405
OUTLIER: 0
RECHARGE_SUCCESS: 15212
PAYMENTSUCCESS: 15617
PAYMENT_INITIATED: 23333
TOTAL_RECHARGE: 39365
}

你只需要打印在html，就是这样。

Answer 4

我来晚了，但我认为分享我的 fieldSum 烟斗会很有用。

当您有一个对象列表并且想要发布其中一个字段的总和时。

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

/**
 * Pipe to return the sum of `attr` fields in `items`
 */
@Pipe({
  name: 'fieldSum'
})
export class FieldSumPipe implements PipeTransform {
  transform(items: any[], attr: string): number {
    // console.log('items:', items, 'attr:', attr);
    return items.reduce((a, b) => a + b[attr], 0);
  }
}

像这样使用：

{{ items | fieldSum:'qty' }}

使用这个实现计数、平均值等的管道作为参考是微不足道的。

我如何计算 angular 2+ 中 table 列的总和？

How can i calculate the sum of table column in angular 2+?

javascript

angularjs

typescript

ngfor