鉴于此代码:
<div *ngFor='let loc of user.locations | async'>
<div *ngFor='let day of days'>
<div *ngFor='let data of get_data_observable(loc, day) | async'>
...
</div>
</div>
</div>
这正在连接到 Firebase 数据库。
get_data_observable(loc, day) => this.db.list(`/users/${this.auth.uid}/times/${loc.$key}/${day}`)
我相信每次 Angular 检查最内部的 ngFor 时都会创建一个新的可观察对象,从而导致严重的性能问题。我希望 ngFor 绑定(bind)到 get_data_observable(loc, day) 的结果而不是表达式。那么它将订阅一个不会改变的可观察对象。
解决这个问题的最佳方法是什么?
最佳答案
我通过将最里面的 ngFor 包含在组件中并为其提供函数参数作为输入来解决这个问题。由于参数本身永远不会改变(每次迭代),因此只会为每个最里面的项目创建一个可观察对象。
<app-day [loc]='loc' [day]='day'></app-avail-day>
还有
export class DayComp {
obs
@Input() loc
@Input() day
ngOnChanges(){
this.obs = get_data_observable(this.loc, this.day)
}
}
关于javascript - Angular 4 : How to bind to function result in ngFor,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45213952/