javascript - 在仪表板页面上显示实时计数器

Question

我有一个消息传递应用程序，其中每条消息都存储在实时数据库中。有一个仪表板显示到目前为止交换的消息总数。

为了实现统计信息，每天存储消息计数，并在交换新消息时使用 firebase 函数触发器更新当前计数。

下面是数据的样子

stats
     count
        1559260800000 
           messages: 48
        1559347200000
           messages: 6

我的仪表板 html 如下所示

 <div>{{msgCount}}</div><div style="display: none">{{msgCountArr | async}}</div>

我的 .ts

 msgCount:number
 msgCountArr: Observable<any[]> 

refreshMessages(){
  this.msgCountArr = this.dataSvc.fetchMsgCount().pipe(
    map((msgs: any) => msgs.map(msgObj => {
          this.msgCount = +this.msgCount + +msgObj.messages
          return msgObj
     }))
  );
}

该服务如下所示

  private msgCountList: AngularFireList<Object>

fetchMsgCount(){
    this.msgCountList = this.db.list<Object>('stats/count', ref => ref.orderByChild("messages"))

    return this.msgCountList.snapshotChanges().pipe(
       map(changes => 
        changes.map(c => ({ key: c.payload.key, ...c.payload.val()}))
       )
      ) ;
  }

问题是 msgCount 基本上不断添加整数，因为我不知道每次从 db 新获取数据时如何重置计数器。

如果有更好的方法来做到这一点，也欢迎。

标签： javascriptangularfirebasefirebase-realtime-databaseangularfire2