I'm facing some unexpected behavior in my code. I have a method that iterates over an array of objects, calculates the sum of some values from those objects, and displays the result in a template. Initially, everything loads correctly with the expected sums. However, if I modify any value in the input fields, it seems to output a comma-separated list of individual values instead.
The method responsible for calculating the sum looks like this:
totalHerd(): {kind: number, labor: number, acres: number} {
const total = {kind: 0, labor: 0, acres: 0};
for (const herd of this.manor.livestock) {
total.kind += this.herdKind(herd);
total.labor += this.herdLabor(herd);
total.acres += herd.acres;
}
return total;
}
The calculated result is displayed in the template using these fields: (located near the bottom under "totalHerd()."
<table class="table table-bordered table-striped table-hover table-sm">
<thead class="thead-light">
<tr class="row">
<th class="small font-weight-bold col">Herd</th>
<th class="small font-weight-bold col-md-1 text-center">RI</th>
<th class="small font-weight-bold col-md-1 text-center">Yield</th>
<th class="small font-weight-bold col-md-2 text-center">Acres</th>
<th class="small font-weight-bold col-md-2 text-center">Labor</th>
<th class="small font-weight-bold col-md-2 text-right">Kind</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let herd of manor.livestock" class="row">
<td class="col">{{herd.herdType}}: {{herdHeadCount(herd)}}</td>
<td class="col-md-1 text-center">{{herderIndex(herd)}}</td>
<td class="col-md-1 text-center">{{herdYield(herd)}}</td>
<td class="col-md-2">
<div class="input-group input-group-sm">
<input type="text" class="form-control" [(ngModel)]="herd.acres">
</div>
</td>
<td class="col-md-2 text-center">{{herdLabor(herd)}}</td>
<td class="col-md-2 text-right">{{herdKind(herd) | number}}</td>
</tr>
<tr class="row">
<td class="col text-right font-weight-bold" colspan="3">Totals:</td>
<td class="col-md-2 text-right">{{herdTotal().acres | number}}</td>
<td class="col-md-2 text-right">{{herdTotal().labor | number}}</td>
<td class="col-md-2 text-right">{{herdTotal().kind | number}}</td>
</tr>
</tbody>
</table>
Initially, everything works fine but modifying the value of any "acres" field results in an issue. It seems like it interprets the input as a string, even though everything is supposed to be a number. Even when attempting to parse the value using parseInt, it throws an error indicating that a number value is being passed.
If anyone has any insights on what might be causing this issue, I would greatly appreciate the help. Thank you!