angularfire2 in ionic2, How to map?

Question

I'm stuck with this : My database is very simple.

 {
      "cities" : {
        "A" : true,
        "B" : true,
        "C" : true,
      },
      "productspercities" : {
        "A" : {
          "-KNnf89UzBvzmYlrpiQj" : true,
          "-KNnfAs31LkMUjU60VAG" : true,
          "-KNngYcNoUUql4oIMxwU" : true
        },
        "B" : {
          "-KO-wEN536BAx15ZpTO1" : true,
          "-KO-xsw5Af1QNqTzDo2K" : true
        },
        "C" : {
          "-KNvvTEN5B0jbPLfOHxr" : true,
          "-KO-v_WR8LSk4UfnGoYy" : true,
          "-KO-viF1tOSp4JmpQxdi" : true
        }
      },
      "short_desc" : {
        "-KNnf89UzBvzmYlrpiQj" : {
          "desc" : "A nice flat in A"
        },
        "-KNnfAs31LkMUjU60VAG" : {
          "desc" : "A nice land in A"
        },
        "-KNngYcNoUUql4oIMxwU" : {
          "desc" : "A nice home in A"
        },
        "-KNvvTEN5B0jbPLfOHxr" : {
          "desc" : "A nice flat in C"
        },
        "-KO-v_WR8LSk4UfnGoYy" : {
          "desc" : "A nice land in C"
        },
        "-KO-viF1tOSp4JmpQxdi" : {
          "desc" : "A nice home in C"
        },
        "-KO-wEN536BAx15ZpTO1" : {
          "desc" : "A nice home in B"
        },
        "-KO-xsw5Af1QNqTzDo2K" : {
          "desc" : "A nice land in B"
        }
      }
    }

Saying I want to show only the products for the city A, so I use this function to get all refs of the products for this city :

this.productspercities = this.af.database.list('/productspercities/A')

In this cas, it return these refs : -KNnf89UzBvzmYlrpiQj -KNnfAs31LkMUjU60VAG -KNngYcNoUUql4oIMxwU

So, now I know the products to show have these refs. But how to get the details of these products (short_desc) ?

I tried this :

getShortDesc(city) {
      this.productspercities = this.af.database.list('/productspercities/'+city)
      .map((productspercities) => {
        return productspercities.map((ref) =>
        {
          ref.shortdesc = this.af.database.list('/short_desc/${ref.$key}')
        return ref;
      })
      })

The app is building correctly without any warning but when I try to show the result in the view with :

<ion-card *ngFor="let description of ref.shortdesc | async">
<ion-item>
<h2>{{description.desc}}</h2>
</ion-item>
</ion-card>

I get this error :

ORIGINAL EXCEPTION: TypeError: undefined is not an object (evaluating 'self.parent.context.ref.shortdesc')

I need your help !

Answer 1

The correct map is this.. Finally I found the solution and hope it will help someone else.

this.productspercities = this.af.database.list('/productspercities/'+city)
      .map((items) => { console.log(items);
        return items.map(item => { item.short_desc = this.af.database.object('/short_desc/'+item.$key);
        return item; });
        });

Then in the view :

<ion-card *ngFor="let item of productspercities | async">
<ion-item>
<h2>{{(item.short_desc | async)?.desc}}</h2>
</ion-item>
</ion-card>