Question

我有一个应用程序可以汇总来自不同领域的大量数据。正如我昨晚所知，尽管类型是数字，但绑定模型上的所有输入更改都将它们输入为字符串。

是否有一种简单的方法可以将绑定数据输入转换为可以在我的所有组件中重复使用的更改数字？我需要使用ngModel来保持数据绑定，经过大量的谷歌搜索后，我找不到适用的解决方案。我知道我必须遗漏一些东西，因为这不是一个大问题。任何帮助将不胜感激。

使用的一个例子是以下代码：（totalKind（）是相关方法）

@Component({
  selector: 'app-herd-list',
  templateUrl: './herd-list.component.html',
  styleUrls: ['./herd-list.component.scss']
})
export class HerdListComponent implements OnInit {
  @Input('manor') manor: Manor;

  constructor() { }

  ngOnInit() {
  }

  herderIndex(herd: Herd): number {
    return checkResultIndex(herd.checkResult);
  }

  herdYield(herd: Herd): number {
    const result = Math.floor(
      herd.baseYield *
      this.manor.landQuality *
      this.manor.fiefIndex *
      this.manor.weatherIndex *
      checkResultIndex(herd.checkResult)
    );
    return result;
  }

  herdHeadCount(herd: Herd): number {
    return Math.floor(herd.acres * herd.graze);
  }

  herdLabor(herd: Herd): number {
    return this.herdHeadCount(herd) * herd.baseLabor;
  }

  herdKind(herd: Herd): number {
    return this.herdHeadCount(herd) * this.herdYield(herd);
  }

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

}

下面的视图代码将totalKind呈现为一个数字，但是如果我进行了更改和值更改，我会得到一个字符串数组，尽管该字段被输入为数字。我知道我需要将它转换为数字但是想在ngModel上这样做，所以我可以在所有组件中重复使用它。

<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" (ngModelChange)="">
      </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>

将ngModel绑定输入数据转换为Angular中的数字的最佳方法

0 个答案: