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或未定义，则需要将async管道与?结合使用。如果始终定义列表，则可以省略?并使用异步管道。

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

Answer 2

有很多方法可以使用observables。它们非常强大，但你必须考虑你想要的东西。

<强> 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中的哑组件一样），但这会产生额外的变量，失去修改和反应流处理流的能力，如果你有可能内存泄漏没有取消订阅。

使用Angular 2中的FirebaseObservable计算项目

2 个答案: