Question

我想以Angular格式设置价格，以使美分/小数部分为上标。

从此基本设置中完成此操作的最佳Angular方法是什么？

export class PriceComponent implements OnInit {
  price: number;

  constructor(){}

  ngOnInit() {
    this.price = 4567.89;
  }
}

price.component.html

<div class="price">
   <span class="dollar">{{price | [some pipe]}}</span>
   <span class="cents">{{price | [some other pipe]}}</span>
</div>

或使用管道之外的其他方式...

Answer 1

您可以创建这样的管道。

@Pipe({name: 'split'})
export class SplitPipe implements PipeTransform {
    /**
     *
     * @param value
     * @returns {number}
     */
    transform(value: number): number {
         let parts = number.toString().split('.');
         return `${parts[0]}<span>${parts[1]}</span>'`;
    }
}

Answer 2

如果您不想使用管道，则可以将数字传递给函数。

this.price = formatPrice( 4567.89 );

console.log(price);

formatPrice( price ) {
    let parts = price.toString().split('.');
    return parts[0] + '<span class="decimals">' + parts[1] + '</span>';
}

Angular 6-提取单个css格式的整数和十进制

2 个答案: