Question

可能是工作时间的结束，可能是因为缺少咖啡，但是我似乎无法为此提出正确的想法。

我有一个包含+-180行订单数据的数组。现在，我想计算数字的总和，以将其显示在网格的页脚中。有人可以帮我吗？

数组看起来像这样，但是更大：

[{title: 'title', description: 'description', someNumber: 'someNumber', otherNumber: 'otherNumber'},{title: 'title', description: 'description', someNumber: 'someNumber', otherNumber: 'otherNumber'}]

这是我的代码：

var totalsRow = [];

this.someService.data().subscribe(newData => {
      this.data = newData;

      for (let row of newData) {
        for (let col of this.cols) { //this.cols are all the fields in my array
          if (this.isNumber(row[col.field])) { //This generates row[someNumber]
            //Calculate total and push field to totalsRow
            //So that I can loop through it in my HTML file.
          } else {
            //Push empty field to totalsRow
          }
        }
      }
    });

this.cols看起来像这样：

[{field: 'title', header: 'Nice header title', visible: true, isNumber: false}, 
{field: 'someNumber', header: 'Nice header title', visible: true, isNumber: true}]

这是我的HTML。我想添加一个TFOOT，每个字段的总数是一个数字：

       <thead>
          <tr>
            <ng-container *ngFor="let col of cols">
              <th *ngIf="col.visible" class="text-uppercase small-label" style="white-space: nowrap;">
                <div style="resize:both; overflow: auto; display:block">
                  {{col.header}}
                </div>
              </th>
            </ng-container>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let rowData of data" (click)="onRowSelect(rowData)">
            <ng-container *ngFor="let col of cols">
              <td *ngIf="col.visible" [ngClass]="{'text-center': col.isCentral}">
                <span>{{rowData[col.field]}}</span>
              </td>
            </ng-container>
          </tr>
        </tbody>

我想要实现的目标：

<tfoot>
      <tr *ngFor="let rowData of totalsRow">
        <td *ngIf="col.visible">
          <span>{{rowData[col.field]}}</span>
        </td>
      </tr>
    </tfoot>

谢谢。

Answer 1

如果密钥始终为someNumber

totalsRow = 0;

...

newData.forEach(datum => {
   if(datum.someNumber){
      this.totalsRow += datum.someNumber;
   }
})

Answer 2

您必须带出totalsRow定义。如果您在订阅中声明它，则作用域将停留在该位置，并且您将无法访问它。

...
var totalsRow = [];
this.someService.data().subscribe(newData => {
...

Answer 3

嗯，我自己找到了解决方案。我不知道这是否是最简洁的答案，但目前为止有效：

我在列数组中添加了总计属性，并计算了每列的总计。

for (let col of this.cols) {
        if (col.isNumber) {
          col.total = newData.reduce((a, b) => (a + b[col.field]), 0);
        } 

       <tfoot>
          <tr>
            <ng-container *ngFor="let col of cols">
              <td *ngIf="col.visible">
                <span *ngIf="col.isNumber">{{col.total | currency: 'EUR'}}</span>
              </td>
            </ng-container>
          </tr>
        </tfoot>

计算角度数组的总数

3 个答案: