Nativescript Angular Firebase Listeners populating ListView

firebase

#1

I am trying to populate a ListView of custom components.
The ListView datasource is a BehaviourSubject populated by items retrieved from a Firebase listener. The datasource gets populated correctly but the ListView is empty.
Here is the relevant code :

  1. Profile Service

This is where the listener is added. I provide the callback function as a parameter

addProfilePhotosListener(callbackFunction: Function) {
        const userPhotosPath = 'somePath';
        return firebase.addChildEventListener(zonedCallback((data) => {
                        callbackFunction(photo);
                }), userPhotosPath);
    }
  1. ListView HTML

This is the html markup. I use the async pipe to retrieve data from the BehaviourSubject

<ListView [items]="profilePhotos | async">
    <ng-template let-item="item">
        <app-post [photo]="item"></app-post>
    </ng-template>
</ListView>
  1. ListView Component

These are the relevant parts of the associated component:
I use changeDetection as per the Nativescript Documentation.

Decorator :

@Component({
  selector: 'app-posts',
  moduleId: module.id,
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

Constructor : here is where I add the listener and register my callback function

  constructor(public profileService: ProfileService) {
    this.profileService.addProfilePhotosListener(this.addPhotoToArray);
    this.profilePhotos = new BehaviorSubject([]);
  }

Listener callback function : this.items is a plain array and this.profilePhotos is my BehaviourSubject

  private addPhotoToArray(photo: ComunicationModels.PhotoDto) {
    this.items.push(photo);
    this.profilePhotos.next(this.items);
  }

In the last function I can console.log the photo and item gets inserted in the items array.
What is wrong with my code? Why is nothing showing up? Is there a better way to dinamically populate the ListView?


#2

Do you think your issue is specific to firebase? Can you confirm whether simply updating the profilePhotos (without firebase) still works?


#3

Hi!
Thanks for your reply!
No it’s not a Firebase specific issue as if I create a *ngFor on the array with the app post component,everything works


#4

ListView worked just fine for me. Can you try to update this example and reproduce the issue?


NS-Angular async ListView not working
#5

Thanks for the playground…anyways I fixed the error…it was the wrong binding of this inside the callback function.