Cant access child value from angularfire2 list query

I am working on my first app and have ran in to some problems that hopefully someone can help with.

I have 2 pages, one for displaying posts and another that displays user favorited posts. I’m using angularfire2 with slightly different queries, one should display all posts limited to the value of the limit variable and the other which limits the results to posts the user has marked as a favorite.

the favorites page uses the following function to get the favorite items

  getUserFavourites() {
    let user = firebase.auth().currentUser.uid;
    return this.db.list('/reasons/', {
      query: {
          orderByChild: 'favourites/' + user + '/favourited',
          equalTo: true

I then display the information like this:

    <ion-card *ngFor="let item of posts | async" (click)="itemTapped($event, item)">
        <div class="card-img" [style.backgroundImage]="'url(' + item.img + ')'"></div>

        <div class="remove-favourite" (click)="postsProvider.removeFavourite(item.$key)">
            <ion-icon name="close"></ion-icon>
                {{ item.reason }}

                {{ item.favourites[userId].note }}

Using this method I am able to use {{ item.favourites[userId].note }} and the value is returned. However, with a nearly identical setup apart from a slightly different query (below) the same does not work.

getPosts(limit) {
    return this.db.list('/reasons', {
      query: {
          limitToFirst: limit

I feel like I’m missing something obvious but I don’t see why there would be differences between the results apart from they are displaying different results . If I try and use {{ item.favorites[userId].note }} on the posts page then I get an error “cannot read property userId of undefined” (userId is the current users ID), this however works as expected on the favorites page.

The information is there as {{ item.favorites | json }} shows the values, both pages return the same results.

Any help is appreciated.