Question

我有一些我无法弄清楚的行为。我有一个方法循环一个对象数组并从对象中总结几个值，我在模板中显示它。它加载了预期的总和但是如果我改变输入中的任何值，它会产生看起来像个别值的逗号分隔数组。

对值求和的方法是：

  herdTotal(): {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;
  }

结果通过以下字段显示在模板中:(靠近底部“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}}d</td>
  </tr>
  </tbody>
</table>

正如我所说，他们首先加载正确，但如果我更改任何亩字段值，我会得到一个列表。我会想象它认为那里有一个字符串，但是所有内容都被输入为数字，即使我尝试使用parseInt来擦除它，我也会收到错误消息，说我正在尝试传递数字值。

任何人都知道发生了什么事？感谢您的任何见解。

Answer 1

根据我的评论 - 所有输入都会产生一个字符串 - 这需要转换为求和的数字 - 尝试按如下方式更改函数：

 herdTotal(): {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 += parseInt(herd.acres); // note the parseInt here
    }
    return total;
  }

迭代数字以添加它们会返回Angular中的数组

1 个答案: