Làm thế nào để hiển thị các ký hiệu tiền tệ ở bên phải trong góc 2

Question

Tôi có để hiển thị tiền tệ Euro như thế này '583 €' nhưng với mã này:

{{price | currency:'EUR':true}} 

tôi nhận được '€ 583', là có bất kỳ tùy chọn trong Angular 2 core để di chuyển biểu tượng sang phải không? Rất nhiều quốc gia châu Âu họ sử dụng biểu tượng ở bên phải (Pháp, Đức, Tây Ban Nha, Ý).

Answer 1

Kể từ Angular2 phiên bản RC6 bạn có thể thiết lập miền địa phương mặc định trực tiếp trong mô-đun ứng dụng của bạn (nhà cung cấp):

import {NgModule, LOCALE_ID} from '@angular/core'; 

@NgModule({ 
    providers: [{ 
     provide: LOCALE_ID, 
     useValue: 'de-DE' // 'de-DE' for Germany, 'fr-FR' for France ... 
    }, 
    ] 
}) 

Sau đó ống tệ nên chọn các thiết lập miền địa phương và di chuyển các biểu tượng sang phải:

@Component({ 
    selector:"my-app", 

    template:` 
    <h2>Price:<h2> 
    {{price|currency:'EUR':true}} 
    ` 
}) 

Answer 2

Thành thật mà nói, tôi không thể tìm thấy cách nào để xây dựng nó. Vì vậy, ống tùy chỉnh đã tạo được gọi là chia.

Demo làm việc: dạng ống http://plnkr.co/edit/KX7hfaV2i7CX2VFobM8R?p=preview

import{Component,provide,Pipe,PipeTransform} from '@angular/core'; 

@Pipe({name:'split'}) 
export class ShiftPosition implements PipeTransform { 
    transform(items: any[], value: string): string { 
     return items.substr(1)+' ' +items.substr(0,1); 
    } 
} 


@Component({ 
    selector:"my-app", 

    template:` 
    <h2>Dashboard<h2> 
    {{price|currency:'EUR':true|split:price}} 
    ` 
}) 

export class AppComponent{  
    price=10; 
} 

Answer 3

tệ được điều khiển bởi the current locale rules. Xem thêm Using Pipes:

Ống ngày và tiền tệ cần API quốc tế hóa ECMAScript. Safari và các trình duyệt cũ khác không hỗ trợ nó. Chúng tôi có thể thêm hỗ trợ với một polyfill.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script> 

Dưới mui xe CurrencyPipedelegates formatting tonew Intl.NumberFormat(locale, options).format(num);.

Intl.NumberFormat Using options:

var number = 123456.789; 

// request a currency format 
console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number)); 
// → 123.456,79 € 

// the Japanese yen doesn't use a minor unit 
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number)); 
// → ￥123,457 

---

Nói cách khác, định dạng tiền tệ với CurrencyPipe bao gồm:

1. Sử dụng locale đúng. Xem this on how to replace the default locale, nhưng điều này chỉ cần thiết để thử nghiệm, bởi vì người dùng được mong đợi có miền địa phương chính xác được đặt trong cài đặt OS.
2. Và sử dụng polyfill cho các trình duyệt cũ hơn.

Answer 4

Cung cấp LOCALE_ID không phải là giải pháp vì ứng dụng của tôi bằng tiếng Anh nhưng hiển thị đơn vị tiền tệ có ngôn ngữ Pháp. Vì vậy, nếu tôi đặt LOCALE_ID thành fr-FR, tất cả các ngày của tôi đều bằng tiếng Pháp, không được chấp nhận.

Vì vậy, tôi chỉ cần chọn decimal pipe sau đó tôi thêm biểu tượng ở cuối.

<div> 
    {{ document.totalTaxAmount | number:'1.2-2' }} EUR 
</div> 

Vấn đề ở đây, nếu số không được xác định, bạn sẽ chỉ kết thúc bằng biểu tượng.Để giải quyết vấn đề đó, tôi đã tạo ra một đường ống không có sản phẩm nào:

@Pipe({ 
    name: 'notEmpty' 
}) 
export class NotEmptyPipe implements PipeTransform { 
    transform(value: any, replaceWith: any = ""): any { 
     if (!value) { 
      return replaceWith; 
     } 
     return value; 
    } 
} 

Và sử dụng nó như thế này:

<div> 
    {{ document.totalTaxAmount | number:'1.2-2' | notEmpty: '0' }} EUR 
</div> 

Answer 5

Làm điều đó như thế này:

{{price | currency:'EUR':true:'1.0-0'}} 

Không cần thêm đường ống, nó sử dụng đường ống tiền tệ mặc định