如何获取待办列表中已完成Todo项的长度？Angular技术问询

嘿，我来帮你搞定这个AngularFire待办事项的统计问题！你遇到的核心问题是对Observable数据流的操作理解有点偏差，咱们一步步来解决：

为什么原来的代码不工作？ #

你写的{{(items.completed | async)?.length}}是错误的，因为items是一个Observable<Todo[]>（可观察的Todo数组），它本身并没有completed属性——completed是数组里每个Todo对象的属性。你得先通过async管道拿到实际的数组，再过滤统计符合条件的项。

解决方案：组件内处理统计逻辑（推荐） #

最好的做法是在组件里创建一个专门的Observable来统计已完成项的数量，这样模板逻辑更简洁，性能也更好。

1. 组件代码修改 #

首先，在组件里新增一个completedItemsCount Observable，用RxJS的map操作符处理数据流：

import { Component } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// 定义Todo类型
interface Todo {
  key?: string;
  description: string;
  completed: boolean;
}

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css']
})
export class TodoComponent {
  itemsRef: AngularFireList<Todo>;
  items: Observable<Todo[]>;
  // 新增：统计已完成项数量的Observable
  completedItemsCount: Observable<number>;

  constructor(db: AngularFireDatabase) {
    this.itemsRef = db.list('todos');
    
    // 从Firebase获取带key的Todo数组
    this.items = this.itemsRef.snapshotChanges().pipe(
      map(changes => 
        changes.map(c => ({ 
          key: c.payload.key, 
          ...c.payload.val() as Todo 
        }))
      )
    );

    // 统计已完成项的数量
    this.completedItemsCount = this.items.pipe(
      map(todos => todos.filter(todo => todo.completed).length)
    );
  }
}

2. 模板代码修改 #

现在你可以在模板里直接用async管道订阅这个统计结果：

<div>Todo List:</div>
{{(items | async)?.length}} <-- 总待办项数量
<div>{{completedItemsCount | async}}</div> <!-- 已完成待办项数量 -->
<hr>
<ul *ngIf="items | async">
  <li *ngFor="let item of items | async" [class.completed]="item.completed">
    {{item.description}}
  </li>
</ul>

如果你非要在模板里直接统计（不推荐） #

虽然不建议在模板里写复杂逻辑，但如果临时需要，你可以这样写：

{{((items | async)?.filter(todo => todo.completed)).length || 0}}

这里用|| 0是为了避免数组为空时显示undefined。不过这种方式每次变更检测都会执行filter，性能不如组件内处理的方式。

总结你的两个问题 #

1. 获取已完成待办项的总长度：通过创建新的Observable，结合RxJS的map和数组的filter方法统计已完成项的数量，再用async管道在模板显示。
2. 统计数组中特定状态对象的数量：核心逻辑是用数组的filter方法筛选出符合状态（比如completed: true）的对象，再取length属性，结合Observable的管道操作处理数据流。

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