角度观测管道

Question

我想看看这是否是最有效的。目标是从一组包含对萤火虫中用户的引用的文档中获取用户的数据。

ngOnInit

this.links = this.currentUserRef.collection('links', ref => ref.where('pendingRequest', '==', false)).get()
            .pipe(map(querySnap => {
                const ret = [];
                querySnap.forEach(async doc => {
                    const val = await doc.get('otherUser').get().then(async userData => {
                        return {
                            id: userData.id,
                            img: await this.getImage(userData.get('profilepic')),
                            name: userData.get('name'),
                            bio: userData.get('bio')
                        }
                    });
                    ret.push(val);
                });
                return ret;
            }));

<ion-item *ngFor="let link of links | async">
            <ion-avatar slot="start">
                <img src="{{link.img}}">
            </ion-avatar>
            <ion-label>
                <h2>{{link.name}}</h2>
                <p>{{link.bio}}</p>
            </ion-label>
            <ion-checkbox id="{{link.id}}"></ion-checkbox>
        </ion-item>

Answer 1

在这种情况下，“高效”是什么意思？

从性能角度看，它很慢，因为它处理一个接一个的元素，为了处理一个元素，它需要等待异步调用。

因此，浏览器将能够一次执行多个请求。

您可以尝试使用异步管道将getImage请求移动到html中。然后浏览器将能够同时触发多个请求。

除此之外，我还会用几种方法来划分代码。所以看起来是这样：

__HTML__
<img [src]="getImage(link.img) | async"



__TypeScript__
interface Link{
    id: string,
    img: string,
    name: string,
    bio: string
};

...
this.links = this.getLinks(userRef);
...

private getLinks(userRef: ??? ): Link[] {
    return userRef.collection('links', ref.where('pendingRequest', '==', false)).get()
        .pipe(
            map(querySnap => mapSnapToLinks(querySnap))
        )
}

private mapSnapToLinks(querySnap: ???):Link[]{
    querySnap.forEach(async doc => {
        const val = doc.get('otherUser').get().then(userData => this.mapUserToLink(userData));
        ret.push(val);
    });
}

private mapUserToLink(userData): Link {
    return {
        id: userData.id,
        img: userData.get('profilepic'),
        name: userData.get('name'),
        bio: userData.get('bio')
    }
}