作者:王海937_264 | 来源:互联网 | 2023-02-11 12:11
我正在使用Angular 2和AngularFire与FirebaseObservable来获取"喜欢"列表,使用以下代码:
likes: FirebaseListObservable;
constructor(private angularFire: AngularFire) {
this.likes = angularFire.database.list('/likes');
}
onClicked() {
this.likes.push({'item': 'new like'})
}
我正在使用各种循环
我想得到所有项目的计数,但以下是失败:
{{ likes.length }}
有谁知道如何实现这一目标?
谢谢!
1> Amanda..:
?
如果返回的列表在某些情况下可能为null或未定义,则需要结合使用异步管道.如果始终定义列表,则可以省略?
并使用异步管道.
{{(likes | async)?.length}}
2> 小智..:
使用observable有很多种方法.它们非常强大,但你必须考虑你想要的东西.
1.多个订阅
这将订阅两次observable,这对AngularFire来说并不是一个大问题,但如果您使用HTTP,它会导致意外问题.
{{like.item}}
{{(likes | async)?.length}} items
2.衍生可观察
你可以创建自己的observable只是为了长度,但这再次创建了对AngularFire的多个订阅.
this.length = likes.map(list => list.length);
然后我们在你的模板中的某个地方
{{this.length | async}}
3.哑/智能组件
创建一个哑组件以使用您的observable.
然后在子组件的模板中,observable已经被打开了.
{{like.item}}
{{likes.length}} items
4.局部变量/不可观察
您可以将列表分配给本地变量
angularfire.database.list(ref).subscribe(list => this.likes = list);
这将允许您在模板中直接引用它(就像#3中的哑组件一样),但这会产生额外的变量,失去修改和反应流处理流的能力,如果不是,则可能会导致内存泄漏退订.