带有十进制数字的打字稿减法答案

【问题标题】：Typescript subtraction with decimal numbers带有十进制数字的打字稿减法
【发布时间】：2022-01-07 09:27:01
【问题描述】：

我有一个跟踪库存水平变化的表格，在大多数情况下，加法/减法是整数（-1、-2、+2、+3）等。但是，在某些情况下，+0.5、-0.25 可能需要。我当前的代码得到了正确的值，但是当涉及到小数时，它会减去或添加到最接近的整数 (+1/-1)。 oldValue 和 newValue 变量是从库存变化表中填充的，我正在显示库存变化的数量。

下面是计算函数-

  formatDifference(change: StockChange) {
    const difference = parseInt(change.newValue || '0', 10) - parseInt(change.oldValue || '0', 10);
    return difference > 0 ? '+' + difference : difference;
  }

HTML -

<td style="text-align: center;">
  ({{formatDifference(change)}})
  <div class="stockLabel">
   Difference
  </div>
</td>

【问题讨论】：

最简单的答案是改用parseFloat，因为您不想解析int ????
那你需要控制要显示的小数位数。见toLocaleString 或者直接使用the pipe suggested by Juan Vicente

标签： html angular typescript

【解决方案1】：

由于您不存储值，因此在 HTML 本身中执行此操作的一种可能方法是使用 十进制管道（number 是十进制管道的关键字）

<td style="text-align: center;">
  ( {{    (change?.newValue ?? 0 | number:'1.0-2') - 
          (change?.oldValue ?? 0 | number:'1.0-2')
          | number:'1.0-2'        
    }} )
  <div class="stockLabel">
   Difference
  </div>
</td>

基本语法：

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} 对于 instacen，“1.0-2”表示：

小数点前至少显示 1 位
小数点后不必有数字（默认）
如果小数点后有数字，最大为2位

如果你想将“逻辑”传递给 ts 文件，你也可以使用 decimalPipe programmatically，但你必须在你的文件中导入它，然后将其用作“decimalPipe”：

import {DecimalPipe} from '@angular/common';
...
constructor( private decimalPipe: DecimalPipe ) { }
...
formatDifference(change: StockChange) {
    const difference = this.decimalPipe.transform( change.newValue || '0', '1.0-2') - this.decimalPipe.transform( change.oldValue || '0', '1.0-2');
    return difference > 0 ? '+' + difference : difference;
  }

注意：十进制管道位于 de '@angular/common' 中，因此您需要将其导入到您的模块中。

关于十进制管道的更多信息 HERE

【讨论】：