使用 MatTable 和 MatTableDataSource 時如何減少查詢？

Question

我正在嘗試查詢我的 firestore 數據庫中的文檔，顯示它並顯示列中的特定總值 (promiAmount)

我能夠在 mat 表中顯示值，但是我無法減少它的值來獲取特定列的總數 (promiAmount)

我嘗試了不同的方法，但它總是以未定義的形式結束，我不知何故錯過了這一步，但我想不通。

Model：

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

Firestore 實際數據

{
  "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"
  },

組件 TS 代碼：

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),  
      )
   )
  }
}
  

嘗試 1：結果未定義

  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)

嘗試 2：結果未定義

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)
      )
   )

嘗試 3：結果未定義

 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)

嘗試 4：結果未定義

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

經過多次試驗並根據@priyashree 的參考幫助，發現我們正在將一個空數據傳遞給我們的數組，（對於錯誤和新手表示歉意）

在我們最初的嘗試 2中，我們只是將我們的訂閱數據/可觀察數據傳遞給我們的 mattabledatasource。

如果我們只是將順序更改為此，則嘗試 2有效，

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))
   )