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 时都会创建一个新的 observable，从而导致大量性能问题。我希望 ngFor 绑定到 get_data_observable(loc, day) 的结果而不是表达式。然后它将订阅一个不会改变的 observable。

解决这个问题的最佳方法是什么？

Answer 1

我通过将最里面的 ngFor 封装在一个组件中来解决这个问题，并将函数参数作为其输入。由于参数本身永远不会改变（每次迭代），因此每个 in-most 项目只会创建一个 observable。

<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)
    }
}