代码之家 › 专栏 › 技术社区 › Eli

如何计算角度6中表列的和?

ngfor angularjs javascript

Eli · 技术社区 · 7 年前

我有一个表,它根据用户选择动态地开始过滤(管道)。

我需要在底部输入一个摘要行,显示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>

2 回复 | 直到 7 年前

Mohammad Reza Farahani 7 年前

创建一个新的筛选管道,用当前筛选计算总和

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

Mohammad Reza Farahani 7 年前

我发现了另一种以更好的性能复制代码的方法,代码如下:

<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中的箭头函数计算筛选结果的和

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

9 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

9 月前

Alex · 在轻量级中同时解构和不解构变量

9 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

9 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

10 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

10 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

10 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

10 月前

user3472810 · Angular@Output/EventEmitter返回undefined

10 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

10 月前