Hiển thị tiền tệ âm với dấu ngoặc trong Angular 2/Typescript

Bản địa hóa en-us của Angular đã được cập nhật kể từ phiên bản 1.3 để hiển thị tiền âm với dấu âm thay vì dấu ngoặc đơn. Tôi đang sử dụng AngularJS 2/Typescript và muốn ghi đè dấu âm mặc định bằng dấu ngoặc đơn (hoặc thậm chí là thứ gì đó khác).

Thảo luận về điều này cho thấy cách ghi đè negPre & negSuf tuy nhiên tôi không thấy cách thực hiện điều này với Angular2. Hoặc có lẽ có một cách tinh tế hơn để đạt được điều này.

Câu trả lời #1

Tôi đánh giá cao việc bạn đặt câu hỏi tuyệt vời này. Tất nhiên là ống tiền tệ tồn tại, nhưng sau khi xem qua tài liệu về ống tiền tệ thì có vẻ như theo mặc định, ống này sẽ không thực hiện được những gì bạn muốn. Tuy nhiên, bạn có thể đạt được mục tiêu của mình bằng một ống tùy chỉnh.

1. Trước tiên, hãy nhận ra rằng bạn có thể "liên kết các ống".

Ví dụ, bạn có thể có một biến kiểu số, gửi nó qua ống tiền tệ, và sau đó gửi nó qua ống tùy chỉnh của riêng bạn:

<h1>{{someNumber | currency:'USD':true | myCustomPipe}}</h1>

2. Nhận biết rằng bộ lọc currency trả về một chuỗi.

Điều này có nghĩa là ống tùy chỉnh của bạn có thể nhận một chuỗi, thực hiện một số thao tác trên chuỗi và trả về một chuỗi mới.

3. Nhận ra rằng thuật toán xử lý chuỗi để chuyển từ dấu trừ sang dấu ngoặc không thực sự phức tạp.

Logic có thể được diễn giải bằng tiếng Anh đơn giản như sau: "Nếu ký tự đầu tiên của giá trị đầu vào của tôi không phải là dấu trừ thì chỉ cần trả về giá trị đó, nhưng nếu là dấu trừ thì trả về toàn bộ chuỗi mà không có ký tự đầu tiên đó và thêm một chuỗi chứa một dấu ngoặc vào mỗi bên của nó". Sử dụng toán tử ba ngôi trong JavaScript có thể trông như sau:

value.charAt(0) === '-' ?
'(' + value.substring(1, value.length) + ')' :
value;

Tôi cũng đã tạo một Pipe đẹp thực hiện việc này như một ví dụ tối thiểu có thể hoạt động. Giả sử bạn có thành phần này đang hiển thị biến someNumber có giá trị là -5 (âm năm).

@Component({
  selector: 'my-app',
  template: `
    <h2>MinusSignToParens Pipe Demo</h2>
    <h1>{{someNumber | currency:'USD':true | minusSignToParens}}</h1>
  `
})
export class App implements OnInit {
   
  private someNumber = -5;
  
  constructor() {}
  
  ngOnInit() {}
}

Và đây là mã cho pipe minusSignToParens:

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

@Pipe({
  name: 'minusSignToParens'
})
export class MinusSignToParens implements PipeTransform {

    transform(value: any, args?: any): any {
        return value.charAt(0) === '-' ?
           '(' + value.substring(1, value.length) + ')' :
           value;
    }
}

Đây là ví dụ trong một Plunkr nếu bạn muốn thử nghiệm với nó.

Và nhớ nhé, như Migos sẽ nói, hãy bật nó lên!