I am working with an Angular Material table that looks like this:
<table mat-table [dataSource]="mixDetails" matSort matSortActive="index" matSortDirection="asc">
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef style="width: 4%">
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"
[aria-label]="checkboxLabel()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row" style="width: 4%;">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
[aria-label]="checkboxLabel(row)">
</mat-checkbox>
</td>
<td mat-footer-cell *matFooterCellDef style="width: 4%; padding-left: 5px">
Total
</td>
</ng-container>
<ng-container matColumnDef="index">
<th mat-header-cell *matHeaderCellDef mat-sort-header style="width: 4%">#</th>
<td mat-cell *matCellDef="let row; let i=index" style="width: 4%">{{i + 1}}</td>
<td mat-footer-cell *matFooterCellDef style="width: 4%">
{{mixDetails.data.length}}
</td>
</ng-container>
<ng-container matColumnDef="component">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Component</th>
<td mat-cell *matCellDef="let row">
<div fxLayout="row" fxLayoutAlign="space-between" style="padding-left: 5px" *ngIf="!editMode">
{{row.synonym?.compound.compoundName}}
<mat-icon *ngIf="row.synonym?.compound.isToxic" style="color: orangered">warning</mat-icon>
</div>
<div *ngIf="editMode">
<ng-select [items]="synonyms"
appearance="outline"
bindLabel="otherName"
bindValue="synonymId"
[clearable]="false"
[(ngModel)]="row.synonymId"
[ngModelOptions]="{standalone: true}"></ng-select>
</div>
</td>
<td mat-footer-cell *matFooterCellDef></td>
</ng-container>
...
More code here
...
</table>
In my TypeScript file, I have the getProductTotal function defined as follows:
getProductTotal() {
var total = 0;
for (var i = 0; i < this.mixDetails.data.length; i++) {
total = total + this.mixDetails.data[i].productCharge;
}
return total;
}
Everything works fine when the data loads initially, and all numbers and totals display correct values. However, when I enter edit mode and make changes in the product charge column, the total value becomes inaccurate. For example, if the initial values were 60, 20, 25, 50, the total should be 155. After editing, perhaps changing 20 to 45, the total should become 175, but instead, I get incorrect values like 60, 452550. I'm unsure of what I might be doing wrong. If there are any suggestions or guidance on how to resolve this issue, I would greatly appreciate it. Thank you for your assistance.