如何更改Angular中的视图值？

Question

我为百分比字段创建了一个属性指令，以便可以处理小数。我想禁止在输入字段中添加小数。有用。但是后端将,00添加到模糊后的值，我想删除后端添加的,00。

输入字段：

<input type="text"
#formItem
[name]="id"
[id]="id"
class="form-control"
[ngModel]="value"
(blur)="change.emit(formItem.value)"
removeDecimals="true" />

指令：

import { Directive, ElementRef, Input, OnInit, HostListener, Renderer2 } from '@angular/core';

@Directive({
  selector: '[removeDecimals]'
})

export class RemoveDecimalsDirective implements OnInit {
  @Input() removeDecimals: boolean | undefined;
  private _value : any;
  
  constructor(private el: ElementRef, private renderer2: Renderer2) {
  }

  ngOnInit() {
  }
  
  @HostListener('input') onChange() {
    if(this.removeDecimals) {
      const { value } = this.el.nativeElement;
      this.renderer2.setProperty(this.el.nativeElement, 'value', value.replace(/[^0-9]/g, ''));
    }
  }
}

所以尝试在指令中添加类似这样的内容，以从视图中删除 ,00，但没有成功。

@HostListener('blur') onBlur() {
    let formatValue = this.el.nativeElement.value;

    const index = formatValue.indexOf(',');
    if (index > -1) {
        formatValue = this.el.nativeElement.value.slice(0, index);
    }

    this.renderer2.setProperty(this.el.nativeElement, 'value', formatValue);
}

因此，当我在输入字段中输入值时，无法添加小数，只能添加正确的数字。但是当我离开现场时，它会从后端添加 ,00。

如何去掉输入框模糊后后台添加的,00？

Answer 1

DEMO 你可以为你的模型使用自定义管道

[ngModel]="value | num"

您的自定义管道

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

@Pipe({
  name: 'num'
})
export class SafePipe implements PipeTransform {

 
 public transform(value: any) {
    return value.split(",")[0]
  }
}

如何更改Angular中的视图值？

How to change the view value in Angular?

angular-directive

angular