角管空间答案

【问题标题】：Angular Pipe Space角管空间
【发布时间】：2019-05-26 07:45:41
【问题描述】：

我正在使用管道应用它将显示哪种货币。 R$ 或 $。但它被总值卡住了，我想知道我如何获得管道值之间的间距

预期结果 86.20 雷亚尔

<ng-container matColumnDef="totalValue">
            <mat-header-cell class="mr-16" *matHeaderCellDef fxFlex="15"  fxLayoutAlign="end center">Total R$</mat-header-cell>
            <mat-cell  class="mr-16" *matCellDef="let element" fxFlex="15"  fxLayoutAlign="end center" >
              <p class="text-truncate" matTooltip='{{ element.totalValue  | currency : element.currency : "symbol" }}'>
                {{ element.total | currency : element.currency : "symbol" }}
              </p>
            </mat-cell>
          </ng-container>

【问题讨论】：

您必须编辑必须在代码（currencypipe.ts）中某处的管道执行函数并在其中添加空间
我有一些使用相同模块的组件，更改它会影响。
所以给函数spacing:true加上一个布尔值并处理
这是我必须编辑的方法吗？对不起，我没有得到改变的逻辑。这种方法会改变吗？转换（值：任何，货币代码？：字符串，显示？：“代码”|“符号”|“符号窄”|字符串|布尔，digitsInfo？：字符串，语言环境？：字符串）：字符串|空；

标签： html css angular typescript angular6

【解决方案1】：

您可以定义一个自定义CurrencySpacePipe，它扩展CurrencyPipe并在货币符号后插入一个空格：

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

@Pipe({ name: "currencySpace" })
export class CurrencySpacePipe extends CurrencyPipe {
  transform(value: number, ...args: any[]): string {
    return super.transform(value, ...args).replace(/([^\d.,])(\d)/, "$1 $2");
  }
}

并在您的标记中使用该管道，而不是标准的 CurrencyPipe：

{{ element.total | currencySpace : element.currency : "symbol" }}

请参阅this stackblitz 以获取演示。

【讨论】：

【解决方案2】：

连接末尾的空格，如下面的代码所示。它对我有用。顺便说一下，我正在使用 Angular 6。

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

【讨论】：