Angular中计算两个数值差值并为differenceInValues赋值的实现咨询

方案1：模板内直接计算（适合简单场景） #

如果仅需要展示差值无需存储，直接修改差值列的模板内容即可，自动做数值转换避免字符串拼接问题：

<td scope="row">
  {{change.oldValue}}
</td>
<td scope="row">
  {{change.newValue}}
</td>
<td scope="row">
  {{ Number(change.newValue) - Number(change.oldValue) }}
</td>

如果需要保留固定小数位，可改为：

{{ (Number(change.newValue) - Number(change.oldValue)).toFixed(2) }}

方案2：封装方法调用（可复用性更高） #

在框架的方法区块定义计算差值的公共方法，以Vue为例：

methods: {
  getDifference(change) {
    const oldVal = Number(change.oldValue)
    const newVal = Number(change.newValue)
    // 处理非数值异常情况
    if (isNaN(oldVal) || isNaN(newVal)) return '-'
    return newVal - oldVal
  }
}

模板中调用方法即可：

<td scope="row">
  {{ getDifference(change) }}
</td>

方案3：直接给differenceInValues字段赋值（需要存储差值的场景） #

在获取到表格数据后遍历处理每个条目，给差值字段赋值：

// 假设tableData是接口返回的表格数组
tableData.forEach(change => {
  const oldVal = Number(change.oldValue)
  const newVal = Number(change.newValue)
  change.differenceInValues = isNaN(oldVal) || isNaN(newVal) ? '-' : (newVal - oldVal)
})

处理完成后原模板无需修改，直接渲染change.differenceInValues即可。

内容的提问来源于stack exchange，提问作者DZF