获取 NgFor 项目的总数 Angular

Question

我有一个休假数组，其中包含不同休假类型的休假计数，我必须return每种休假类型的总数

array = {
    "Jan 2021": [
        {
            "WFH": 17.5
        },
        {
            "CL": 3.5
        }
    ],
    "Feb 2021": [
        {
            "WFH": 19.5
        },
        {
            "CL": 2.5
        }
    ],
    "Mar 2021": [
        {
            "WFH": 13
        }
    ]
}

这是我的 html 文件：

<table class="table table-statitics2 table-bordered" aria-label="Leave">
                            <thead>
                                <tr>
                                    <th scope="col"></th>
                                    <th scope="col" class="casual">CL</th>
                                    <th scope="col" class="earned">EL</th>
                                </tr>
                            </thead>
                            <tbody *ngIf="leaves">
                                <tr *ngFor="let item of leaves | keyvalue : keepOriginalOrder">
                                    <td class="date">{{item.key}}</td>
                                    <td>{{getMonthyItem(item.value, "CL")}}</td>
                                    <td>{{getMonthyItem(item.value, "EL")}}</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                  <th colspan="2" class="text-center text-danger" scope="row">Total</th>
                                  <th scope="row">Total of CL</th>
                                  <th scope="row">Total of EL</th>
                                </tr>
                              </tfoot>
                        </table>

这是我 return 离开计数

的功能

getMonthyItem(items, object)
  {
    let result = '';
    items.forEach(element => {
      if(Object.keys(element) == object)
      {
        result  = element[object];
      }
    });
    return result;
  }

如何 return table 页脚部分的每种休假类型总数，还有什么简单的方法可以 return 直接在 html 页面上休假计数没用过的功能

预期结果是，

	CL	WFH
Jan 2021	3.5	17.5
Feb 2021	2.5	19.5
Mar 2021	1	13
Total	7	50

谢谢...................................... ..................................................... ..................................................... .....................................

Answer 1

我的方法是在一个函数中计算总数，然后手动添加一个额外的行，其中包含以下数据：

HTML:

<table class="table table-statitics2 table-bordered" aria-label="Leave">
                            <thead>
                                <tr>
                                    <th scope="col"></th>
                                    <th scope="col" class="casual">CL</th>
                                    <th scope="col" class="earned">EL</th>
                                </tr>
                            </thead>
                            <tbody *ngIf="leaves">
                                <tr *ngFor="let item of leaves | keyvalue : keepOriginalOrder">
                                    <td class="date">{{item.key}}</td>
                                    <td>{{getMonthyItem(item.value, "CL")}}</td>
                                    <td>{{getMonthyItem(item.value, "EL")}}</td>
                                </tr>
<tr>
<td class="date">Total</td>
<td>{{total(leaves, "CL")}}</td>
<td>{{total(leaves, "WFH")}}</td>
</tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                  <th colspan="2" class="text-center text-danger" scope="row">Total</th>
                                  <th scope="row">Total of CL</th>
                                  <th scope="row">Total of EL</th>
                                </tr>
                              </tfoot>
                        </table>

函数：

total(items, object)
  {
    let result = 0;
    items.forEach(x => {
      if(Object.keys(x) == object)
      {
        result  = result + x[object];
      }
    });
    return result;
  }

Answer 2

<table class="table table-statitics2 table-bordered" aria-label="Leave">
                            <thead>
                                <tr>
                                    <th scope="col"></th>
                                    <th scope="col" class="casual">CL</th>
                                    <th scope="col" class="earned">EL</th>
                                </tr>
                            </thead>
                            <tbody *ngIf="leaves">
                                <tr *ngFor="let item of leaves | keyvalue : keepOriginalOrder">
                                    <td class="date">{{item.key}}</td>
                                    <td>{{getMonthyItem(item.value, "CL")}}</td>
                                    <td>{{getMonthyItem(item.value, "EL")}}</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                  <th colspan="2" class="text-center text-danger" scope="row">Total</th>
                                  <th scope="row">Total of CL</th>
                                  <th scope="row">Total of EL</th>
                                </tr>
                                <tr> 
                                   <td>total('CL')</td>
                                   <td>total('EL')</td>
                                </tr>
                              </tfoot>
                        </table>

然后在您的 .ts 函数中定义一个新函数。如我所见，您已经将包含所有信息的 leaves 保留为字段。所以会是

public total (type: string): number {
   let sum = 0;
   Object.keys(this.leaves).forEach(key => {
       this.leaves[key].forEach(element => {
            sum = sum + (element[type] ? element[type] : 0);
          });
   });
   return sum;
}

获取 NgFor 项目的总数 Angular

Get Total of NgFor item Angular

arrays

angular

ngfor