我有一個跟蹤庫存水平變化的表格，在大多數情況下，加/減是整數（-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>
uj5u.com熱心網友回復：
由于您不存盤該值，因此在 HTML 本身中執行此操作的一種可能方法是使用十進制管道（數字是十進制管道的關鍵字）
<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>
基本語法：
{{值| number :'小數點前的數字。小數點后的最小位數 - 小數點后的最大位數'}}
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} 對于 instacen，'1.0-2' 意味著：
- 小數點前至少顯示 1 位數字
- 小數點后不必有數字（默認）
- 如果有小數點后的數字，最大為2位
如果您想將“邏輯”傳遞給ts檔案，您也可以以編程方式使用decimalPipe ，但您必須將其匯入到您的檔案中，然后將其用作“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' 中，因此您需要將其匯入到您的模塊中。
更多關于十進制管道的資訊在 這里
uj5u.com熱心網友回復：
嘗試這個：
該函式將兩個值轉換為具有固定 2 位小數的數字以進行減法運算
const formatDifference = (change: StockChange): string => {
let newValue = Number(change.newValue ?? "0").toFixed(2);
let oldValue = Number((change.oldValue ?? "0")).toFixed(2);
const difference = newValue - oldValue;
return difference > 0 ? ` ${difference}` : difference "";
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/370079.html