Блок закруглить с использованием десятичной трубы в угловой 4

Question

Используя угловой 4,

{{31.94 | number:'1.0-0'}} 

Выход: 32

Любая идея, как заблокировать округление. Ожидая результат - 31

Answer 1

Вам нужно создать свою собственную трубу, так как DecimalPipe не предоставляет функции пола. Плюс вы можете добавить свою десятичную трубу в него.Ваша заказная труба:

@Pipe({name: 'floor'})
export class FloorPipe implements PipeTransform {
    /**
     *
     * @param value
     * @returns {number}
     */
    transform(value: number): number {
        return Math.floor(value);
    }
}

Использовать в шаблоне как:

  <span>{{ yournumber | floor | your_decimal_pipe }}</span>

Answer 2

your.component.ts

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


@Pipe({name: 'DecimalPipe'})
export class NumNotRoundPipe implements PipeTransform {
  transform(value: number): number {
    var num1 = Math.floor(value * 100) / 100;
    return num1;
  }
}

your.module.ts

import {NumNotRoundPipe} from './your.component'

@NgModule({
    imports: [
    ],
    declarations: [
        NumNotRoundPipe
    ],
    entryComponents: [

    ],
    providers: [

    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

your.component.html

<span>{{yourNumber | DecimalPipe:'1.2-2'}}</span>

Answer 3

Вам может не понадобиться дополнительная пользовательская труба. Выходные данные - это строка, и есть множество струнных каналов. Вы можете усечь, как это:

{{31.94 | slice:0:2}}
//Output : 31

Достигнет желаемого результата в этом конкретном случае.

{{1.94 | number:'2.2-2' | slice:0:2}}
//Output : 01

Вы все еще хотите использовать пользовательский канал, если не хотите заполнять 0.

Answer 4

Когда доступен только «круглый», вы можете смоделировать «пол», вычтя 0,5 из значения.

      {{31.94 - 0.5 | number:'1.0-0'}}

Если ваше значение может быть ниже 0,5, чтобы не печатать «-1», вам нужно будет написать:

      <ng-container *ngIf="myVal >= 0.5">{{ myVal - 0.5 | number:'1.0-0' }}></ng-container>
<ng-container *ngIf="myVal < 0.5">0</ng-container>

Answer 5

В вашем файле модуля:

      import { CommonModule } from '@angular/common';

Добавьте его в массив импорта:

      imports [
   CommonModule
]

Затем используйте:

      {{31.94 | number:'1.0-0'}} 
// It will display 31