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

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

ngfor angularjs javascript

Eli · 技术社区 · 6 年前

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

我需要在底部输入一个摘要行,显示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 回复 | 直到 6 年前

Mohammad Reza Farahani 6 年前

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

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 6 年前

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

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

推荐文章

JennyToy · 如何向ngfor中的元素添加id以及在ngfor中有条件地创建元素

6 年前

PatS · 在Angular中,*ngFor=“let item from list | async”是什么意思?

6 年前

Robin · 使用方法调用而不是ngFor指令的属性时的无限负载

6 年前

Mka24 · Angular5-使用*ngFor构建表格

6 年前

FrankTheTank · ngFor内部无可见内容

6 年前

Gargoyle · *角度5中<tr>元素上的ngFor和*ngIf

6 年前

match · 将ngFor变量传递给ngIf模板

6 年前

louisvno · 使用ngFor更改阵列后未更新DOM

7 年前

Christophe Loeys · 根据API调用的数据,在Angular2中动态创建组件

7 年前

ste92 · 从Web服务器填充ngFor表时出错

7 年前