在小数点角度ui网格上对齐数字

Question

我正在考虑在Angular UI Grid中对齐小数点上的数字，如下所示。

    11.293
      .89
233424
      .34345

我有一些想法，包括一个带有三个对齐div并使用透明0的单元格模板。

有没有人对此有任何好运。

Answer 1

我认为最好的方法是使用Javascript选择所有数字，然后将它们分解并将它们封装在2个span元素中，如下所示：

<div>
    <span class="int">11.</span><span class="float">293</span>
</div>
<div>
    <span class="int">233424.</span><span class="float">89</span>
</div>

然后你可以给元素分配一个with并将.int对齐到右边，将.float对齐到左边用css：

.int, .float{
    display: inline-block;
    width: 100px;
}
.int{
    text-align: right;
}
.float{
    text-align: left;
}

这样选择就可以了，div和span不会影响html5代码的含义。另外，你不要使用固定宽度的字体进行deppend。

希望这有效，如果没有，请告诉我。

Answer 2

在我的component.ts文件中，我添加了一个方法splitNumbers，它将每个数字转换为一个带整数和小数部分的数组：

splitNumbers() {
  return this.numbers.map(number => {
    let str = number.toString();
    return str.split(".");
  });
}

在我的component.html中，我将单独的<span>元素添加到整数和小数部分。除非您想在输出中添加额外的空格，否则不要在标记之间使用空格：

<li *ngFor="let parts of splitNumbers()">
  <span class="integer">{{ parts[0] }}</span>.<span class="fractional">{{ parts[1] }}</span>
</li>

然后在the CSS中我将整数部分设置为内联块，给它一个宽度并使其对齐：

.integer {
  text-align: right;
  width: 10em;
  display: inline-block;
}

结果：

正如您所看到的，最后一个数字非常小并且用科学记数法编写而不是扩展。所以这不能很好地完成。