Angular4：如何在ngFor中绑定到函数结果

Question

给出以下代码：

<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绑定到get_data_observable(loc, day)的结果，而不是表达式。 然后，它将订阅一个不变的可观察对象。

最好的办法是什么？

Answer 1

我通过将最里面的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)
    }
}