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

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重新获取数据时如何重置计数器。

如果有更好的方法，也欢迎您。