如何在Angularfire2中获取特定嵌套对象长度及已完成待办项总数？

我懂你现在的需求：想在AngularFire2里获取待办项列表的总数量，同时统计其中已完成项的个数。你原来代码里尝试的{{(items.completed | async)?.length}}肯定行不通，因为items是一个Observable数组，不能直接访问它的completed属性，得先把这个Observable解析成实际的数组才行。

下面给你两种可行的解决方案：

方案一：在组件中处理统计逻辑（推荐） #

这种方式把统计逻辑放在组件里，模板只负责展示，代码更清晰易维护，也方便后续扩展和测试。

修改TypeScript代码 #

我们可以基于已有的items Observable，创建一个新的Observable来专门存储已完成项的数量：

import { Component } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

// 定义Todo接口，保证类型安全
interface Todo {
  description: string;
  completed: boolean;
  key?: string;
}

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

  constructor(db: AngularFireDatabase) {
    this.itemsRef = db.list('todos');
    
    // 原有获取完整待办项列表的逻辑不变
    this.items = this.itemsRef.snapshotChanges().map(changes => {
      return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
    });

    // 基于items流，过滤已完成项并统计数量
    this.completedItemsCount = this.items.map(todos => {
      return todos.filter(todo => todo.completed).length;
    });
  }
}

修改HTML模板 #

现在模板里可以直接通过async管道获取统计好的数量：

<div>Todo List Total: {{(items | async)?.length}}</div>
<div>Completed Todos Count: {{(completedItemsCount | async)}}</div>
<hr>
<!-- 用async as语法避免多次订阅Observable，提升性能 -->
<ul *ngIf="(items | async) as todo_all">
  <li *ngFor="let item of todo_all" [class.completed]="item.completed">
    {{item.description}}
  </li>
</ul>

方案二：直接在模板中处理（快速但不推荐复杂场景） #

如果只是简单的统计需求，也可以直接在模板里通过async管道解析数组后，调用数组的filter和length方法：

<div>Todo List Total: {{(items | async)?.length}}</div>
<!-- 加|| []是为了避免数组未加载时出现undefined报错 -->
<div>Completed Todos Count: {{((items | async) || []).filter(todo => todo.completed).length}}</div>
<hr>
<ul *ngIf="(items | async) as todo_all">
  <li *ngFor="let item of todo_all" [class.completed]="item.completed">
    {{item.description}}
  </li>
</ul>

这种写法虽然快捷，但逻辑复杂时会让模板变得臃肿，所以更推荐方案一。

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