angular.js – Angular observables piping

I’m fairly new to Angular and the world of observables so I wanted to check and see if this was as efficient as can be. The goal is to get a user’s data from a group of documents that contains references to users in firestore.

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

HTML

<ion-item *ngFor="let link of links | async">
            <ion-avatar slot="start">
                <img src="https://codereview.stackexchange.com/{{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>

Thanks!