How to Reduce upon Query when using MatTable and MatTableDataSource?

Question

I'm trying to query documents in my firestore database, display it and display a specific total of values from a column (promiAmount)

I was able to display the values in mat table however, I can't reduce its value to get the total of a specific column (promiAmount)

I tried different ways but it always end up as undefined, I'm missing a step on this somehow but I couldn't figure out.

Model:

export class PromisoryModel {
    customerAccountNo: string;
    customerName: string;
    customerNo: string;
    transactionDate: string;
    promiFlag:number;
    promiAmount: number;
}

Firestore Actual Data

{
  "2vnLBK4qGBd4ZNbPz9aq": {

    "customerAccountNo": "100-PDQ-12-17",
    "customerName": "TEST, CUSTOMER 1",
    "customerNo": 17,
    "promiAmount": 1667,
    "promiFlag": 3,
    "transactionDate": "2022-02-15"
  },
  "CcK8Ju8ANOM561UyGPPf": {
    "customerAccountNo": "100-PDQ-12-17",
    "customerName": "TEST, CUSTOMER 1",
    "promiAmount": 1667,
    "promiFlag": "3",
    "transactionDate": "2022-02-15"
  },

Component TS Code:

import { Component, OnInit, ViewChild } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
import { Observable} from 'rxjs';
import { PromisoryModel } from 'src/app/models/promisory.model';

@Component({
  selector: 'app-members',
  templateUrl: './members.component.html',
  styleUrls: ['./members.component.scss']
})

export class MembersComponent implements OnInit {
  private PromisorryCollection : AngularFirestoreCollection<PromisoryModel>
  promissory: Observable<PromisoryModel[]>

  constructor(public afs: AngularFirestore) {}

  // declarations
  queryName: any;
  promiList: PromisoryModel[];
  getCsrBadge: any;

  
  queryDetails() {
    this.PromisorryCollection = this.afs.collection('promisory',
    ref => ref
    .where('customerName','==', this.queryName)
    .orderBy('transactionDate','desc')
    )
   this.promissory = this.PromisorryCollection.valueChanges();
   this.promissory.subscribe(
      (data) => (this.dataPromiSource = new MatTableDataSource(data),  
      )
   )
  }
}
  

Attemp 1: Result is undefined

  this.PromisorryCollection = this.afs.collection('promisory',
    ref => ref
    .where('customerName','==', this.queryName)
    .orderBy('transactionDate','desc')
    )
   this.promissory = this.PromisorryCollection.valueChanges();
   this.promissory.subscribe(
      (data) => (this.dataPromiSource = new MatTableDataSource(data),
      
      this.getCsrBadge = (data).reduce((acc, cur)=> {
        return acc+ cur.promiAmount
      },0)
      )
   )

   console.log(this.getCsrBadge)

Attempt 2: Result is undefined

this.PromisorryCollection = this.afs.collection('promisory',
    ref => ref
    .where('customerName','==', this.queryName)
    .orderBy('transactionDate','desc')
    )
   this.promissory = this.PromisorryCollection.valueChanges();
   this.promissory.subscribe(
      (data) => (this.dataPromiSource = new MatTableDataSource(data),
      this.promiList = (data),
      this.getCsrBadge =this.promiList.reduce((acc, cur)=> {
        return acc+ cur.promiAmount
      },0)
      )
   )

Attempt 3: result is undefined

 this.PromisorryCollection = this.afs.collection('promisory',
    ref => ref
    .where('customerName','==', this.queryName)
    .orderBy('transactionDate','desc')
    )
   this.promissory = this.PromisorryCollection.valueChanges();
   this.promissory.subscribe(
      (data) => (this.dataPromiSource = new MatTableDataSource(data),
      this.dataPromiSource.filter = this.queryName.trim().toLowerCase(),
      this.getCsrBadge =this.dataPromiSource.filteredData.map( amount => amount.promiAmount).reduce((acc,cur) => acc+cur,0)
      )
   )

   

   console.log(this.getCsrBadge)

Attempt 4: result is undefined

this.PromisorryCollection = this.afs.collection('promisory',
    ref => ref
    .where('customerName','==', this.queryName)
    .orderBy('transactionDate','desc')
    )
   this.promissory = this.PromisorryCollection.valueChanges();
   this.promissory.subscribe(
      (data) => (this.dataPromiSource = new MatTableDataSource(data),
      data.filter = this.queryName.trim().toLowerCase(),
      this.getCsrBadge =this.dataPromiSource.filteredData.map( amount => amount.promiAmount).reduce((acc,cur) => acc+cur,0)
      )
   )

   

   console.log(this.getCsrBadge)

Answer 1

After multiple trials and as per @priyashree's help of reference, Found out that we're passing an empty data to our array, (apologies for the mislook and for being newb)

in our original Attempt 2 , we're just passing our subscription data / observable to our mattabledatasource only.

Attempt 2 works if we just change the order to this,

this.PromisorryCollection = this.afs.collection('promisory',
    ref => ref
    .where('customerName','==', this.queryName)
    .orderBy('transactionDate','desc')
    )
   this.promissory = this.PromisorryCollection.valueChanges();
   this.promissory.subscribe(
      (data) => (
      this.promiList = (data),
      this.getCsrBadge =this.promiList.reduce((acc, cur)=> {
        return acc+ cur.promiAmount
      },0),
      this.dataPromiSource = new MatTableDataSource(data))
   )