html - Angular 管空间

Question

我正在使用管道来应用它将显示的货币类型。 R$ 或 $。但它被总值(value)困住了，我想知道如何获得管道值之间的间距

Expected result 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>

Answer 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进行演示。