带有 Firebase 数据的 Angular 应用程序：为什么我会看到上一页的数据？

Question

所以，我在 Firebase 上托管了一个 Angular 9 应用程序，并使用 Firestore 存储数据。我有一个看起来很简单的问题，但我无法理解它为什么会发生。我已经对应用程序进行了很多简化以找到问题的根本原因，并将尝试在下面尽可能解释该问题。

应用程序：我有 2 个页面、一个主页和一个交易页面。两个页面都从同一个 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();
  }

结果：这是每一步输出到控制台的内容

1. 我在主页上打开应用程序（如预期的 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)

1. 我导航到交易页面：

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 行？

Answer 1

您在交易页面上获得了 2 次结果。 valueChanges 很可能会从 firestore 内存缓存中返回数据作为快速响应，然后从真实数据中读取。在您的情况下，当它们在主页上返回时会缓存 4 行，并从事务页面上的缓存中处理它们。

Answer 2

我认为问题出在这里：

loadHomeData() {
  this.txSubscription = this.firestore
  ...
  .subscribe(rows => {
    ...
  })
}

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

ngOnDestroy() {
  this.txSubscription.unsubscribe();
}

您的退订是正确的。但是，看看当 onAuthStateChanged 再次触发时会发生什么。您的第一个订阅已丢失，无法取消订阅。我认为在onAuthStateChanged 上使用switchmap 运算符可以解决您的问题。像这样的：

this.subscription = this.af.authState.pipe(
  switchMap(auth => {
    if(auth !== null && auth !== undefined){
      return   this.firestore.collection('transactions', ref => ref.orderBy('profitEur', 'desc').limit(10)).valueChanges())
    } else{
      throw "Not loggedin";
    }
).subscribe(...)

Answer 3

这个问题的发生可能是因为

this.afAuth.onAuthStateChanged()

被触发两次。

而不是检查每个组件的身份验证状态。 您可以简单地在app.component.ts订阅身份验证状态。如果用户未经身份验证或身份验证状态更改，它将重定向到登录页面，否则将重定向到 home.page.ts

export class AppComponent {
  constructor(private readonly auth: AngularFireAuth, private router: Router) {
    this.auth.authState.subscribe(response => {
      console.log(response);
      if (response && response.uid) {
        this.router.navigate(['dashboard', 'home']); //Home page route
      } else {
        this.router.navigate(['auth', 'login']); //Login page route
      }
    }, error => {
      this.auth.signOut();
      this.router.navigate(['auth', 'login']); //Login Page route
    });
  }
}

在您的 home.component.ts 和 transaction.page.ts 中无需检查身份验证状态。

• home.component.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.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.loadHomeData();
  }

  ngOnDestroy() {
    this.txSubscription.unsubscribe();
  }