How to move FirebaseObjectObservable into a Fireba

Question

I'm having trouble moving a FirebaseObjectObservable into a FirebaseListObservable.

constructor(
   af: AngularFire, 
   private cs: ContactsService,
   public modalCtrl: ModalController
) { 
   // Getting Friends
   this.friends = af.database.list('/userFriends/jvi1cjPwddPomjEDNwv3VihskOX2/')
      .map((friends)=>{
        return friends.map((friend) => {
          friend = af.database.object('/users/'+friend.$key);
          return friend;
        })
      });

   }

When I log it to the console. I end up with an array of FirebaseObjectObservables. How can I move this into a FirebaseListObservable so that I can use the async pipe to render the objects.

My html template looks like:

    <ion-list>
        <ion-list-header>
            Contacts
        </ion-list-header>
        <ion-list-header>A</ion-list-header>
        <contact-item  
            *ngFor='let friend of friends | async'  
            [user]="friend"></contact-item>
    </ion-list>

Any help is greatly appreciated :)

Update

I was able to solve my question. It was a matter of changing my async pipe inside my list. So it now looks like this.

<ion-list>
    <ion-list-header>
        Contacts
    </ion-list-header>
    <ion-list-header>A</ion-list-header>
    <contact-item  
        *ngFor='let friend of friends | async'  
        [user]="(friend | async)"></contact-item>
</ion-list>

Not sure if that's the correct practice though.