在 Angular 2 中使用 Firebase Observable 计算项目

Question

我正在使用 Angular 2 和 AngularFire 以及 FirebaseObservable 来获取 "likes" 的列表，使用以下代码：

likes: FirebaseListObservable<number[]>;

constructor(private angularFire: AngularFire) {
    this.likes = angularFire.database.list('/likes');
}

onClicked() {
    this.likes.push({'item': 'new like'})
}

我正在使用

循环遍历每个

<ul>
    <li *ngFor="let like of likes | async">
        {{ like.item }}
    </li>
 </ul>

I would like to get the count of all items but the following is failing:

<span>{{ likes.length }}</span>

有人知道如何实现吗？

谢谢！

Answer 1

如果在某些情况下返回的列表可能为 null 或未定义，则需要将异步管道与 ? 结合使用。如果始终定义列表，则可以省略 ? 并仅使用异步管道。

<span>{{(likes | async)?.length}}</span>

Answer 2

有很多方法可以处理可观察对象。他们很强大，但你得想清楚你想从他们那里得到什么。

1.多个订阅

这将订阅 observable 两次，这对 AngularFire 来说不是什么大不了的事情，但是如果您使用 HTTP，它会给您带来意想不到的问题。

<li *ngFor="let item of likes | async">
    {{like.item}}
</li>
{{(likes | async)?.length}} items

2。导数 Observable

您可以创建自己的 observable 只是为了长度，但这又一次创建了对 AngularFire 的多个订阅。

this.length = likes.map(list => list.length);

然后在您的模板中的某处使用它

{{this.length | async}}

3。哑/智能组件

创建一个哑组件以使用您的 observable。

<view-likes [likes]="likes | async"></view-likes>

然后在子组件的模板中，observable 已经被展开。

<li *ngFor="let item of likes">{{like.item}}</li>
{{likes.length}} items

4.局部变量 / non-observable

您可以将列表分配给局部变量

angularfire.database.list(ref).subscribe(list => this.likes = list);

这将允许您在模板中直接引用它（就像#3 中的哑组件一样），但这会产生额外的变量，失去您响应式地修改和处理流的能力，并且可能会导致内存泄漏如果您没有取消订阅。

在 Angular 2 中使用 Firebase Observable 计算项目

Counting items with FirebaseObservable in Angular 2

firebase

angularfire

firebase-realtime-database

angularfire2

angular