typescript - Calcular y mostrar el total del campo de entrada al cambiar en la tabla de Angular Material

Tengo una tabla de Angular Material con campos de entrada. Necesito calcular el total (sin botón) y mostrarlo en la parte inferior. Además, cuando se cambia el número en la entrada, debería recalcular y mostrarlo. Calcula y muestra la suma de lo que está en el archivo ts, pero cuando se cambian los valores en la caja de entrada, se concatena. Código HTML

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

Respuesta #1

Esa concatenación se debe a que value (que proviene del campo de entrada) es una cadena. Cambialo a un número antes de la suma.

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