Firebase & Angular: старые данные отображаются на экране при переключении страницы

Question

У меня есть приложение Angular с домашней страницей, где я показываю 4 последних строки в «тестовой» коллекции Firebase. Затем есть отдельная тестовая страница, где я показываю все строки в этой коллекции. Однако, когда я начинаю с домашней страницы, а затем go на тестовой странице, я все еще вижу 4 последние строки на экране вместо всех строк.

Вот мой код для домашней страницы. ts:

  // Function to load all data required to show on the page
  async loadData() {
    const orderParamsDateDesc = {
      field: 'date',
      order: 'desc'
    }
    
    await this._FirebaseService.readSortLimit('test', orderParamsDateDesc, 4).then(result => this.testRows= result);
  }

  async ngOnInit() {
    // Only try to load the data if the user is authenticated again
    this.afAuth.onAuthStateChanged(async () => {
      await this.loadData();
    })
  }

Вот тот же код для test.page.ts:

  // Function to get the transaction rows and calculate the current total P/L
  async getRows() {
    this.testRows = [];
    let orderParams = {
      field: 'date',
      order: 'desc'
    }
    await this._FirebaseService.readSort("test", orderParams).then(result => this.testRows = result);
  }

  ngOnInit() {
    this.afAuth.onAuthStateChanged(async () => {
      this.getRows();
    })
  }

Вот мой firebase.service.ts с функциями readSort и readSortLimit:

  readSortLimit(collection, orderDetails, limitNumber) {
    return new Promise((resolve, reject) => {
      let result = [];
      this.firestore
        .collection(collection, ref => ref
          .orderBy(orderDetails.field, orderDetails.order)
          .limit(limitNumber)
        )
        .snapshotChanges()
        .subscribe(item => {
          Array.from(item).forEach(row => {
            result.push(row.payload.doc.data());
          });
          resolve(result);
        });
    });
  }

  readSort(collection, orderDetails) {
    return new Promise((resolve, reject) => {
      let result = [];
      this.firestore
        .collection(collection, ref => ref
          .orderBy(orderDetails.field, orderDetails.order)
        )
        .snapshotChanges()
        .subscribe(item => {
          Array.from(item).forEach(row => {
            result.push(row.payload.doc.data());
          });
          resolve(result);
        });
    });
  }