Góc 2 Tiền tệ Khoảng trống giữa tiền tệ và số?

Question

Tôi nhận thấy rằng có một đường ống được gọi là CurrencyPipe ở Góc 2, sẽ lọc một số số thập phân từ một số. Điều này cũng thêm chỉ số tiền tệ ISO, tức là 'USD' hoặc bất kỳ loại tiền nội tệ nào khác.

Vấn đề của tôi là kết quả được hiển thị như thế này:

USD123 

Nếu không có khoảng trống giữa USD và 123, đây có phải là hành vi ưa thích? Tôi có phải viết đường ống của riêng mình cho điều này hay không và tôi có thể làm gì để thêm không gian?

Dưới đây là một số mã:

<span>{{ product.price | currency:'USD' }}</span> 

Answer 1

Đây không phải là khả năng kể từ khi CurrencyPipe dựa vào Intl.NumberFormat và không có tùy chọn cho việc này.

Điều đó nói rằng bạn có thể chuyển sang chế độ hiển thị $ thay vì USD với symbolDisplay tham số thiết lập để true:

<span>{{ product.price | currency:'USD':true }}</span> 

Điều này sẽ hiển thị: $123 đó là một chút tốt hơn ;-) Nếu điều này không phù hợp với bạn , bạn cần phải thực hiện một đường ống tùy chỉnh để định dạng số điện thoại ...

Xem những liên kết này để biết thêm chi tiết:

• https://github.com/angular/angular/blob/master/modules/angular2/src/facade/intl.ts#L70
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

Answer 2

Bạn có thể giải quyết vấn đề này bằng một chút CSS thông minh sử dụng first-letter pseudo element, thêm một lớp học để khoảng của bạn:

<span class="price">{{ product.price | currency:'USD':true }}</span> 

và trong css add bạn:

.price { 
    display: inline-block; 
} 

.price::first-letter { 
    padding-right: 0.3em; 
} 

Quy tắc đầu tiên đảm bảo giá của bạn trong hộp chứa khối (::first-letter hoạt động trên inline khối hiển thị) và quy tắc thứ hai thêm một chút đệm thừa sau ký hiệu tiền tệ.

Bạn có thể tinh chỉnh điều này theo ý thích của mình ...

Answer 3

Bạn có thực sự cần sử dụng ống tiền tệ không? Bạn luôn có thể tách các tệ từ số tiền:

<span class="price">{{ product.currency }} {{ product.price|number:'1.2-2'}}</span>

hoặc trong trường hợp của bạn:

<span class="price">USD {{ product.price|number:'1.2-2'}}</span>

Answer 4

Hãy ống tệ tùy chỉnh của riêng bạn.

import { Pipe, PipeTransform } from '@angular/core'; 
import { CurrencyPipe } from '@angular/common'; 

@Pipe({ name: 'myCurrency' }) 
export class MyCurrencyPipe implements PipeTransform { 
    transform(num: any, currencyCode: string, showSymbol: boolean, digits: string): any { 
     let value = new CurrencyPipe(navigator.language).transform(num, currencyCode, showSymbol, digits); 
     let firstDigit = value.match(/\d/); 
     let symbol = value.slice(0, firstDigit.index); 
     let amount = value.slice(firstDigit.index); 
     return symbol + " " + amount; 
    } 
} 

và sử dụng nó trong HTML như

{{amount | myCurrency: currencyCode :true:'1.0-2'}} 

Answer 5

Bạn có thể ghi đè lên các đường ống như sau. Đảm bảo bạn bao gồm điều này trong mô-đun

import {Pipe, PipeTransform} from "@angular/core"; 
import {CurrencyPipe} from "@angular/common"; 


@Pipe({name: 'currency'}) 
export class MyCurrencyPipe extends CurrencyPipe implements PipeTransform { 
    transform(value: any, currencyCode: string, symbolDisplay: boolean, digits: string): string { 
    const currencyFormat = super.transform(value, currencyCode, symbolDisplay, digits); 
    const firstDigit = currency_format.search(/\d/); 
    return currency_format.substring(0, firstDigit) + ' ' + currency_format.substr(firstDigit); 
    } 
}