Javascript Angular/Firebase应用程序不断显示上一页的数据

我有一个带有主页的Angular应用程序，其中我显示了“transactions”Firebase集合中最新的4行（按日期排序，降序）。然后是一个单独的事务页面，我在其中显示此集合中的前10行（按金额排序，降序）。然而，当我从主页开始，然后进入交易页面时，在我的条形图中，应显示按金额排列的前10项交易，我仍然可以看到主页上最近的4项交易

演示链接：

复制步骤：

打开演示应用程序

在主页最底部，您将看到“最近的交易”

打开菜单并导航到“事务”页面

条形图看起来有点奇怪，似乎数据仍然包含主页上最近的4笔交易

导航到其他页面（而不是主页），然后返回“交易”页面，条形图现在看起来应该正常

这是我的home.page.ts的代码：

  // Function to load the 4 most recent transactions to show on the home page
  async loadData() {
    // Order by date, descending
    const orderParamsDateDesc = {
      field: 'date',
      order: 'desc'
    }
    
    // Call our service to load the data, given the ordering details, and limit the number of rows to 4
    await this._FirebaseService.readSortLimit('transactions', orderParamsDateDesc, 4).then(result => this.transactionRows = result);
  }

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

  // Function to load the top 10 transactions, ordered by amount (descending)
  async getRows() {
    // Initialize the arrays
    this.barChartDataEur = [];
    this.barChartLabelsEur = [];
    let rows: any = [];

    // Order by amount, descending
    let orderParams = {
      field: 'amount',
      order: 'desc'
    }

    // Call our service to load the data given the ordering details, and limit the number of rows to 10
    await this._FirebaseService.readSortLimit("transactions", orderParams, 10).then(result => rows = result);

    // Loop over the resulting rows and load the stock tickers and amount separately in the arrays which will be used for the bar chart
    await rows.forEach(row => {
      this.barChartLabelsEur.push(row.ticker.slice(0, 8));
      this.barChartDataEur.push(row.amount);
    });

    // Set the loaded flag to true
    this.loaded = true;
  }

  ngOnInit() {
    // Only execute this part if user is authenticated
    this.afAuth.onAuthStateChanged(async () => {
      this.getRows();
    })
  }

下面是用于事务的相同代码。page.ts：

  // Function to load the 4 most recent transactions to show on the home page
  async loadData() {
    // Order by date, descending
    const orderParamsDateDesc = {
      field: 'date',
      order: 'desc'
    }
    
    // Call our service to load the data, given the ordering details, and limit the number of rows to 4
    await this._FirebaseService.readSortLimit('transactions', orderParamsDateDesc, 4).then(result => this.transactionRows = result);
  }

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

  // Function to load the top 10 transactions, ordered by amount (descending)
  async getRows() {
    // Initialize the arrays
    this.barChartDataEur = [];
    this.barChartLabelsEur = [];
    let rows: any = [];

    // Order by amount, descending
    let orderParams = {
      field: 'amount',
      order: 'desc'
    }

    // Call our service to load the data given the ordering details, and limit the number of rows to 10
    await this._FirebaseService.readSortLimit("transactions", orderParams, 10).then(result => rows = result);

    // Loop over the resulting rows and load the stock tickers and amount separately in the arrays which will be used for the bar chart
    await rows.forEach(row => {
      this.barChartLabelsEur.push(row.ticker.slice(0, 8));
      this.barChartDataEur.push(row.amount);
    });

    // Set the loaded flag to true
    this.loaded = true;
  }

  ngOnInit() {
    // Only execute this part if user is authenticated
    this.afAuth.onAuthStateChanged(async () => {
      this.getRows();
    })
  }

下面是用于呈现条形图的transaction.page.html的一部分：

  <div class="chart-canvas">
    <canvas baseChart *ngIf="loaded"  // Only if data is loaded
            [data]="barChartDataEur"
            [labels]="barChartLabelsEur"
            [chartType]="barChartType"
            [options]="barChartOptions"
            [colors]="barChartColors"
            [legend]="barChartLegend"
            [plugins]="barChartPlugins">
    </canvas>
  </div>

---

snapshotChanges

可能首先处理并返回缓存中的数据作为快速结果。函数

readSortLimit

返回一个承诺，该承诺将使用缓存中的数据进行解析。下一步

resolve

s被忽略

您需要修改函数

readSortLimit

，以返回

Observable

  readSortLimit(collection, orderDetails, limitNumber) {
    return this.firestore
        .collection(collection, ref => ref
          .orderBy(orderDetails.field, orderDetails.order)
          .limit(limitNumber)
        )
        .snapshotChanges()
        .subscribe(items => {
          Array.from(items).map(row => row.payload.doc.data()));
        });
  }

然后修改

getRows

  async getRows() {
    // Order by amount, descending
    let orderParams = {
      field: 'amount',
      order: 'desc'
    }

    // Call our service to load the data given the ordering details, and limit the number of rows to 10
    this._FirebaseService.readSortLimit("transactions", orderParams, 10)
           .subscribe(rows => {
             // Initialize the arrays
             this.barChartDataEur = [];
             this.barChartLabelsEur = [];

             // Loop over the resulting rows and load the stock tickers and amount separately in the arrays which will be used for the bar chart
             rows.forEach(row => {
               this.barChartLabelsEur.push(row.ticker.slice(0, 8));
               this.barChartDataEur.push(row.amount);
             }); 
             
             // Set the loaded flag to true
             this.loaded = true;            
           });
  }

---

**确保

getRows

最多调用一次。否则您会多次订阅同一事件。

我使用Angularfire将数据获取到页面，因此我不太熟悉Firebase本机函数。但是，当Firebase中的新记录发生更改时，您可能看不到它们。是

解析（结果）没有完成承诺，所以你的数据被加载了，但是你还没有监听可观测数据的变化？嘿，我实际上也在使用@angular/fire。我不确定到底发生了什么——在主页上，我读了我收藏的前4行，效果很好。然而，在下一页，我想要的不是前4名，而是前10名。我看到的不是前10名，而是主页上的4名加上从Firestore读取的前10名……看起来您正在将数据放入一个数组，因此您将第二页上的10名添加到第一页上的原始4名。为什么不继续返回收藏并使用异步管道呢？嗨@StevenScott，我已经编辑了我的文章，提供了更多细节，还添加了我的应用程序的演示链接，以便更好地了解这个问题。基本上，在这两个页面上，我都需要显示一个单独的数据集。两者都来自Firebase中的“transactions”集合，但主页上的是按日期排序的，而transactions页面上的是按金额排序的。有趣。我明白你的意思。当我最初切换时，值只有4条记录，而不是14条记录。我切换到表视图以更好地理解数据。当我在页面中移动时，它会正确刷新。菜单上的“重新加载”也会将其转换为10个条目。我对您使用的唯一区别（尽管我使用的是Firebase实时数据库）是，在处理项目列表时，我使用的是ValueChanges（）而不是SnapshotChanges（）。