动态调整模板中的对象值？

Question

我正在将对象数组的内容输出到模板中具有各种移动速率的表中。用户可以选择一个在各种距离单位之间转换的按钮，并希望根据所选语句动态调整模板中的对象值，但我一生无法弄清楚如何在不重新加载整个数组的情况下执行此操作每次。

有没有办法将对象值传递给根据所选单位重新计算它的辅助方法？我在想我可以构建一个帮助方法来重新计算列表，但我对 Angular 还是很陌生，这似乎不是办法。感谢您的帮助。

this.movementRatesFlat =[  
  {
    terrain: 'Flat',
    path: 'Paved Road',
    foot: 5,
    horse: 10,
    cart: 5,
    wagon: 5
  },
  {
    terrain: 'Flat',
    path: 'Unpaved Road',
    foot: 5,
    horse: 9,
    cart: 5,
    wagon: 4
  }, ...
  ]

在模板中我像这样输出表格：

  <tr *ngFor="let mr of movementRatesFlat">
    <td>{{mr.path}}</td>
    <td class="text-center">{{mr.foot}}</td>
    <td class="text-center">{{mr.horse}}</td>
    <td class="text-center">{{mr.cart}}</td>
    <td class="text-center">{{mr.wagon}}</td>
  </tr>>

Answer 1

您可以从模板中调用函数。 所以，你可以：

 <tr *ngFor="let mr of movementRatesFlat">
    <td>{{mr.path}}</td>
    <td class="text-center">{{convert(mr.foot)}}</td>
    <td class="text-center">{{convert(mr.horse)}}</td>
    <td class="text-center">{{convert(mr.cart)}}</td>
    <td class="text-center">{{convert(mr.wagon)}}</td>
  </tr>

在你的组件中，你会有类似的东西：

public selectedUnits;

public convert(value) {
 return .... /* some function involving 'this.selectedUnits' */
}