如何在角度2中用逗号分隔千位答案

【问题标题】：How to separate thousands with comma in angular 2如何在角度2中用逗号分隔千位
【发布时间】：2017-11-04 17:21:29
【问题描述】：

在角度 2 或 4 中，我希望在输入和用户键入时以及仅打印时，用逗号将数字分隔为千位。您有什么想法或解决方案可以分享吗？提前谢谢你们。

【问题讨论】：

angular.io/api/common/DecimalPipe.
@JB Nizet 谢谢你的回复，但我不明白如何使用它
正如文档示例中所述：{{ someNumber |数字 }}。这是一个管道。它被用作任何其他管道。

标签： angular pipe separator

【解决方案1】：

你有两个选择：

管道（用于没有用户交互的文本）

对于文本（只是显示一些东西），你可以简单地使用 Angular 的内置 Decimal Pipe

@Component({
  selector: 'number-pipe',
    template: `<div>
    <!--output '25,000.00'-->
    <p>{{mynumber | number:'5.2-2'}}</p>

    <!--output '25 000,00'-->
    <p>{{mynumber | number:'5.2-2':'fr'}}</p>
    </div>`
})
export class NumberPipeComponent {
  mynumber: number = 2500000;
}

'5.2.2' 部分响应如下定义的规则：

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

请注意，不同的locale 在格式化时使用逗号或点会产生不同的结果。

掩码（用于数字被格式化为用户类型的输入）

如果您想在用户在<input> 中键入时格式化数字，您需要使用屏蔽库或类似npm package 或类似的格式化程序解决方案。

安装包npm install ng2-currency-mask --save后，你必须通过imports将它添加到你的模块中

import { CurrencyMaskModule } from "ng2-currency-mask";

@NgModule({
    imports: [
        ...
        CurrencyMaskModule
    ],
    declarations: [...],
    providers: [...]
})
export class AppModule {}

最后像这样实现它：

<input currencyMask [(ngModel)]="value" [options]="{ prefix: 'R$ ', thousands: '.', decimal: ',' }"/>

请务必检查软件包提供的所有不同选项。

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
感谢@lebelinoz，我已经编辑了答案以包含这些重要部分。

【解决方案2】：

只需添加此管道{{ mynumber | number:0 }}。它将指定您的值是一个数字。因此，它将以逗号分隔，然后 "0" 指定没有小数。

【讨论】：