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

Question

我有一个Angular应用程序，它有一个主页，在那里我显示了"交易；Firebase集合(按日期降序排列(。然后是一个单独的Transactions页面，我在其中显示了该集合中的前10行(按金额降序排列(。然而，当我从主页开始，然后转到交易页面时，在我的条形图中，应该显示金额前10的交易，我仍然可以从主页中看到最近的4笔交易。

演示链接：https://tickrs-app.web.app/

复制步骤：

1. 打开演示应用程序
2. 在最底部的主页上，您将看到"；最近的交易">
3. 打开菜单并导航到"；交易；第页
4. 条形图看起来有点奇怪，数据似乎仍然包含主页上最近的4笔交易
5. 导航到不同的页面(而不是主页(；交易；页面，条形图现在看起来应该正常

这是我的主页.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();
})
}

以下是transaction.page.ts的相同代码：

// 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>

这是我的firebase.service.ts，带有在两个页面上都使用的readSortLimit函数：

// Input: name of the Firebase collection, the ordering details and the number of rows to return
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);
});
});
}

Answer 1

snapshotChanges可能首先处理并返回缓存中的数据，作为快速结果。函数readSortLimit返回一个promise，该promise是用缓存中的数据解析的。接下来的resolve将被忽略。

您需要修改函数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最多调用一次。否则，您将多次订阅同一活动。