所以,我有一个托管在Firebase上并使用Firestore进行数据存储的Angular 9应用程序。我有一个问题似乎非常简单,但是我无法理解为什么会出现这种情况。为了找到问题的根本原因,我大大简化了应用程序,并将尽力解释下面的问题。
这个应用程序:我有两个页面,一个首页和一个交易页面。这两个页面都从相同的Firebase集合“交易”中读取数据。然而,在首页上,我想显示4笔最近的交易(按日期降序排序),而在交易页面上,我想显示10笔最赚钱的交易(按金额降序排序)。目前,我只是将数据记录到控制台进行调试。在记录数据之前,我也稍微对其进行了一些操作(请参见下面的代码)。
问题:当我从首页开始时,我可以在控制台中看到我的4笔最近交易,如预期的那样。然而,当我进入交易页面时,它会在控制台中再次短暂地记录4笔最近的交易,这些交易应该只显示在首页上。一秒钟左右后,它会显示预期的10笔最赚钱的交易。
代码: 以下是我的home.page.ts代码:
txSubscription: Subscription;
constructor(
public afAuth: AngularFireAuth,
private readonly firestore: AngularFirestore
) { }
// Function to get the 4 most recent transactions
async getRecentTransactions() {
this.txSubscription = this.firestore
.collection('transactions', ref => ref.orderBy('date', 'desc').limit(4))
.valueChanges()
.subscribe(rows => {
this.recentTransactions = [];
rows.forEach(row => {
let jsonData = {};
jsonData['ticker'] = (row['ticker'].length <= 10 ? row['ticker'] : row['ticker'].substring(0, 10) + '...');
jsonData['date'] = formatDate(row['date'].toDate(), 'dd/MM/y', 'en');
jsonData['amount'] = prefix + formatNumber(row['netAmount'], 'be', '1.2-2');
this.recentTransactions.push(jsonData);
})
console.log("home page", this.recentTransactions);
})
}
ngOnInit() {
this.afAuth.onAuthStateChanged(() => {
this.getRecentTransactions();
})
}
ngOnDestroy() {
this.txSubscription.unsubscribe();
}
交易页面的 transaction.page.ts 代码非常相似:
txSubscription: Subscription;
constructor(
public afAuth: AngularFireAuth,
private readonly firestore: AngularFirestore
) { }
// Function to load the data for the home page
loadHomeData() {
this.txSubscription = this.firestore
.collection('transactions', ref => ref.orderBy('profitEur', 'desc').limit(10))
.valueChanges()
.subscribe(rows => {
this.resultRows = [];
rows.forEach(row => {
this.resultRows.push(row['ticker'].slice(0, 8));
});
console.log("transaction page", this.resultRows);
})
}
ngOnInit() {
this.afAuth.onAuthStateChanged(() => {
this.loadHomeData();
})
}
ngOnDestroy() {
this.txSubscription.unsubscribe();
}
结果: 这是每个步骤在控制台上输出的内容
- 我打开应用程序并进入主页 (4行,如预期所示):
home page (4) [{…}, {…}, {…}, {…}]
0: {ticker: "BAR", date: "21/07/2020", amount: "- € 1 086,10"}
1: {ticker: "ASL C340.0...", date: "18/07/2020", amount: "€ 0,00"}
2: {ticker: "ASL C340.0...", date: "14/07/2020", amount: "- € 750,85"}
3: {ticker: "TUI C7.00 ...", date: "20/06/2020", amount: "€ 0,00"}
length: 4
__proto__: Array(0)
我前往“交易”页面:
transaction page (4) ["TUI C7.0", "ASL C340", "BAR", "ASL C340"]
transaction page (10) ["ASL C240", "ASL C232", "REC", "ASL C270", "ASL C310", "ASML", "ASL P220", "BAR", "CFEB", "MELE"]
为什么在导航到主页时,控制台再次显示来自主页的相同4行内容?