使用Angular 2中的FirebaseObservable计算项目

Question

我正在使用Angular 2和AngularFire与FirebaseObservable来获取"喜欢"列表,使用以下代码:

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>

我想得到所有项目的计数,但以下是失败:

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

有谁知道如何实现这一目标？

谢谢!

Answer 1

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

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

Answer 2

使用observable有很多种方法.它们非常强大,但你必须考虑你想要的东西.

1.多个订阅

这将订阅两次observable,这对AngularFire来说并不是一个大问题,但如果您使用HTTP,它会导致意外问题.

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

2.衍生可观察

你可以创建自己的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.局部变量/不可观察

您可以将列表分配给本地变量

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

这将允许您在模板中直接引用它(就像#3中的哑组件一样),但这会产生额外的变量,失去修改和反应流处理流的能力,如果不是,则可能会导致内存泄漏退订.