web-dev-qa-db-ja.com

数を100万または1000の形式でangular 4

私はangular 4アプリケーションで数値形式を表示しようとしています。基本的に、私が見ているのは、数値が12.23ミリオンである場合、表示されるはずです。例：12.2M（小数点以下1桁）

数が50,000.123の場合、50.1K

どうすれば角度でそれを達成できますか？ディレクティブを書く必要がありますか？ angular=に組み込みパイプはありますか？

構造

export interface NpvResults  {

            captiveInsYear: number[];
            captiveInsPremiumPaid: number[];
            captiveInsTaxDeduction: number[];
            captiveInsLoanToParent: number[];
            captiveInsCapitalContribution: number[];
            captiveDividentDistribution: number[];
            captiveInsTerminalValue: number[];

        }

配列は次の値に初期化されます

this.sourceResults.captiveInsPremiumPaid = [1,2,3,4,5];

Html

<td *ngFor= "let item of NpvResults.captiveInsPremiumPaid" >{{item}}</td>
angularangular-pipe
12
Tom

[〜＃〜] pipe [〜＃〜]を作成できます

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

@Pipe({
  name: 'thousandSuff'
})
export class ThousandSuffixesPipe implements PipeTransform {

  transform(input: any, args?: any): any {
    var exp, rounded,
      suffixes = ['k', 'M', 'G', 'T', 'P', 'E'];

    if (Number.isNaN(input)) {
      return null;
    }

    if (input < 1000) {
      return input;
    }

    exp = Math.floor(Math.log(input) / Math.log(1000));

    return (input / Math.pow(1000, exp)).toFixed(args) + suffixes[exp - 1];


  }

}

ビューに実装する

{{ model | thousandSuff  }} <!-- 0 decimals -->

{{ model | thousandSuff : 2  }}  <!-- X decimals -->

結果

{{22600000 | 1000Suff}}-> 23M

{{22600000 | 1000Suff：2}}-> 22.60M

26
mQuiroz

ここで私はあなたに最初に作成するアイデアを与えます
Html
{{number | shortNumber}}
自分で作成できますcustom pipe filterでは、パイプで数値を渡すことができます。次に、以下のようなコードを実行して、このロジックをカスタムパイプに配置できます。

パイプフィルター

getformat(){
    if(number == 0) {
    return 0;
}
else
{        
  // hundreds
  if(number <= 999){
    return number ;
  }
  // thousands
  else if(number >= 1000 && number <= 999999){
    return (number / 1000) + 'K';
  }
  // millions
  else if(number >= 1000000 && number <= 999999999){
    return (number / 1000000) + 'M';
  }
  // billions
  else if(number >= 1000000000 && number <= 999999999999){
    return (number / 1000000000) + 'B';
  }
  else
    return number ;
  }
}

カスタムパイプの作成については、このサイトを参照できます ここをクリック

3
Brijesh Mavani

最も簡単な方法は、パイプとサービスを作成することです。数値jsライブラリを使用して実際にサービスでフォーマットを行い、そのサービスをパイプにインポートして、変換メソッドでフォーマットを適用できます。

import { Pipe, PipeTransform } from '@angular/core';
import { NumberFormatService } from '../utils/number-format.service';

@Pipe({
  name: 'numberFormat'
})
export class NumberFormatPipe implements PipeTransform {

  constructor(private nF: NumberFormatService) {}

  transform(value: any, args?: any): any {
    if(args == "commas"){
      return this.nF.addCommas(value);
    }
    else if(args == "kmb"){
      return this.nF.addKMB(value);
    }
    return value;
  }

}

import { Injectable } from '@angular/core';
import * as numeral from 'numeral';

@Injectable({
  providedIn: 'root'
})
export class NumberFormatService {

  constructor() { }

  public addCommas(val){
    return numeral(val).format('0,0');
  }

  public addKMB(val){
    return numeral(val).format('0[.]00a');
  }
}

html template file
{{dailyData.avgDaily | numberFormat: 'commas'}}
{{dailyData.avgDaily | numberFormat: 'kmb'}}
  1. 公式サイト link から数値js依存関係のドキュメントを入手できます。
  2. angularアプリケーションにnpm install numeric --saveを使用してnumericjsをインストールできます
0
ideeps

私は以下のパイプを書きます、それはすべての負のシナリオ（負の数、文字列、空白）も処理します。 すべてのケースで最適に機能します。ここに記事を記入してください。

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

@Pipe({
  name: 'numberSuffix'
})
export class NumberSuffixPipe implements PipeTransform {
  transform(input: any, args?: any): any {
    let exp;
    const suffixes = ['K', 'M', 'B', 'T', 'P', 'E'];
    const isNagtiveValues = input < 0;
    if (Number.isNaN(input) || (input < 1000 && input >= 0) || !this.isNumeric(input) || (input < 0 && input > -1000)) {
      if (!!args && this.isNumeric(input) && !(input < 0) && input != 0) {
        return input.toFixed(args);
      } else {
        return input;
      }
    }

    if (!isNagtiveValues) {
      exp = Math.floor(Math.log(input) / Math.log(1000));

      return (input / Math.pow(1000, exp)).toFixed(args) + suffixes[exp - 1];
    } else {
      input = input * -1;

      exp = Math.floor(Math.log(input) / Math.log(1000));

      return (input * -1 / Math.pow(1000, exp)).toFixed(args) + suffixes[exp - 1];
    }
  }
  isNumeric(value): boolean {
    if (value < 0) value = value * -1;
    if (/^-{0,1}\d+$/.test(value)) {
      return true;
    } else if (/^\d+\.\d+$/.test(value)) {
      return true;
    } else {
      return false;
    }
  }
}
0
Nimish goel