Angular Async Pipe not updating properly

Question

I have an angular async pipe as follows:

  <ng-container *ngIf="showProjects && (projects | async) as projectList; else loading">

Then in projects.page.ts I have the following:

  refreshProjects = function(event) {
    this.projects = new Observable<ProjectList>((observer) => {
      let observableProjects: ProjectList = [];
      this.userObject.subscribe( async (user) => {
        observableProjects = [];
        for (let projectID of user.ownedProjects) {
          this.firestore.collection('projects').doc(projectID).ref.onSnapshot( async (doc) => {
            if (doc.exists) {
              let tempProject = doc.data() as Project;
              let tempDate = tempProject.startDate as unknown as { nanoseconds: number; seconds: number; };
              let tempLocation = tempProject.location as unknown as string;
              let observerProject: Project = new Project(
                  tempProject.fullName,
                  tempProject.shortName,
                  tempProject.ownerID,
                  tempProject.lastOwnerID,
                  tempDate.seconds,
                  tempProject.duration,
                  tempProject.logo,
                  tempProject.status,
                  tempProject.categoryID,
                  tempLocation,
                  [],
                  tempProject.timelinePosts);
              await this.firestore.collection('projects/' + projectID + '/descriptions').ref.get().then((snapshot) => {
                snapshot.forEach((doc) => {
                  observerProject.description.push(doc.data() as Description);
                });
                observableProjects.push(observerProject);
              });
            }
          });
        }
        observer.next(observableProjects);
      });
    });

    if (event != undefined) {
      this.showProjects = false;
      setTimeout(() => {
        this.showProjects = true;
        event.target.complete();
      }, 500);
    }
  }

ngOnInit() {
    this.refreshProjects(undefined);
}

I have two projects in my Firebase collection. However, when I first load the page only one shows up, then when I use the and pull to refresh only then do both projects show up. If I move the content in the refreshPorjects into ngOnInit - only one project shows up.

What am I doing wrong?

Thank you!

Answer 1

Instead of observableProjects.push(observerProject) try observableProjects = [...observableProjects, observerProject] . I am thinking since push changes the array immutably and doesn't cause change detection to take effect.