typescript - Beräkna och visa summan av inmatningsfältet när det ändras i Angular material-tabell


Jag har en Angular Material-tabell med inmatningsfält i. Behöver beräkna totalen (utan knapp) och visa längst ner. Även när man ändrar inmatningsnumret ska det räknas om och visas. Den beräknar och visar summan av vad som finns i TS-filen men när ändringar görs i inmatningsrutan, konkateneras det. HTML-kod

<ng-container matColumnDef="tuesday">
  <th mat-header-cell *matHeaderCellDef> tuesday </th>
  <td mat-cell *matCellDef="let transaction">
    <mat-form-field>
      <input  [(ngModel)]="transaction.tuesday" placeholder="Field Name" matInput ="number"/>
         </td>
  <td mat-footer-cell *matFooterCellDef> {{getTotalCostTuesday() | currency}} </td>
</ng-container>

TS code

  transactions: PeriodicElement[] = [
  { project: 'Hydrogen', monday:1, tuesday:2},
  { project: 'Helium',  monday:1 ,tuesday: 5 },
  { project: 'Lithium' , monday:1, tuesday: 3},
  { project: 'Beryllium' , monday:1, tuesday: 4 },

  ];
getTotalCostTuesday() {
  return this.transactions.map(t => t.tuesday
    ).reduce((acc, value) => acc + value, 0);
   
}

Svar #1

Denna sammanfogning beror på value (som kommer från inmatningsfältet) är en sträng. Ändra den till ett nummer innan addition.

getTotalCostTuesday() {
  return this.transactions.map(t => t.tuesday
    ).reduce((acc, value) => acc + parseInt(value), 0);  
}