2017-06-21 204 views
8

如何在Angular 4中爲數字管道指定/覆蓋默認(區域設置)千分隔符,例如?如何在Angular 4中爲數字管道指定千分隔符

{{p.total | number}} 

+2

可能的[如何設置角度2.0中的數字區域設置]的副本(https://stackoverflow.com/questions/37684360/how-to-set-locale-for-numbers-in-angular-2-0) – Pac0

+1

我不這麼認爲。我認爲OP沒有尋找一種方法來改變默認分隔符,而是給管道指定一個例外的參數。後者是不可能不幸與Angular的DecimalPipe。你可以編寫你自己的管道。 –

回答

7

根據Angular有關DecimalPipe的文檔:https://angular.io/api/common/DecimalPipe,沒有明確的參數可以添加到管道調用中,以異常更改用於格式化的字符。

如果您不想更改整個項目的區域設置或關聯的默認值,我認爲您最好的辦法是編寫自己的管道處理您的特例。別擔心,管道非常容易編寫。

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

@Pipe({ 
    name: 'numberfr' 
}) 
export class FrenchDecimalPipe implements PipeTransform { 

    transform(val: number): string { 
    // Format the output to display any way you want here. 
    // For instance: 
    if (val !== undefined && val !== null) { 
     return val.toLocaleString(/*arguments you need*/); 
    } else { 
     return ''; 
    } 
    } 
} 

不要忘了將它添加到NgModule中使用它。

+0

toLocaleString失敗的大數字。例如大於9007199254740991.由於超過了這個數值就不安全了。 – Shantanu

+0

@Shantanu,剛剛瞭解到這個JS限制,謝謝!看起來你不用擔心格式化函數,儘管你超越了'MAX_SAFE_INTEGER'。任何改善我的答案的建議? –

2

以下是我的解決方案,它會幫助某人。

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

@Pipe({ 
    name: 'amountConverter' 
}) 
export class AmountConverterPipe implements PipeTransform { 

    transform(value: number | string, locale?: string): string { 
    return new Intl.NumberFormat(locale, { 
     minimumFractionDigits: 2 
    }).format(Number(value)); 
    } 

} 

位數可以通過改變minimumFractionDigits的值來改變。 在HTML中,你可以使用如下

<span class="strong">{{Price | amountConverter:locale}}</span> 

數字格式將根據區域的值更改。

詳情請參考https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

相關問題