如何统计Angular表格中的旧条目？

看起来你已经搞定了日期差计算和旧条目标记的核心功能，要统计diffDays > 250的旧条目数量其实很简单，这里给你两种实用的实现方式：

方式一：获取数据时同步统计 #

在你获取todos并计算每个条目的diffDays时顺便统计旧条目，这种方式不用重复遍历数组，性能更优：

this.todoService.getTodos()
.then(td => {
  let oldEntriesCount = 0; // 初始化旧条目计数器
  for(let i=0; i<td.todos.length;i++) {
    console.log(td.todos[i]);
    td.todos[i]["diffDays"]= this.dateDiff(new Date(),td.todos[i]["time"]);
    // 检查当前条目是否为旧条目，是则计数器+1
    if(td.todos[i].diffDays > 250) {
      oldEntriesCount++;
    }
  }
  this.todos = td.todos;
  this.oldEntriesCount = oldEntriesCount; // 把统计结果存到组件变量中
})

接着修改提示框代码，同时展示总条目数和旧条目数：

<div *ngIf="todos.length >= 0 " class="Box">
  <div align="center" class="alert alert-info" role="alert">
    <strong>There are {{todos.length}} Entries, {{oldEntriesCount}} of which are old.</strong>
  </div>
</div>

方式二：用计算属性实时统计 #

如果你的todos会动态变化（比如新增、删除条目），可以用Angular的计算属性自动响应数据变化，实时统计：

在组件类中添加计算属性：

// 实时计算旧条目数量
get oldEntriesCount(): number {
  // 可选链操作符避免todos未初始化时报错，过滤后返回数量
  return this.todos?.filter(todo => todo.diffDays > 250).length || 0;
}

提示框的HTML代码和方式一完全一样，不需要额外维护计数器变量，Angular会自动帮你更新统计结果。

小提醒 #

• 若使用方式一，记得在组件类中提前声明变量：oldEntriesCount = 0;
• 两种方式都能满足需求，你可以根据自己的业务场景选择更合适的一种~

内容的提问来源于stack exchange，提问作者BVB1392