Question

我试图创建一个始终显示3位小数的数字输入。因此，如果值1.1将显示为1.100。我已经创建了一个响应模糊事件的指令，它运行良好，但是如果ngModel在加载时传递一个值，我就无法触发格式化。

当我在ngOnInit中检查DOM元素值时，它尚未设置。我已经尝试从模型本身捕获值，而不是在Init函数中设置DOM元素值的DOM，但是在init事件之后用非小数位数值来覆盖它。

以下代码演示了这一点（未填充的数字3加载到输入，如果您单击进入，则值将更改为3.000：https://embed.plnkr.co/L1wxZN8n8tGvWU51KLcj/

在模型值传播到第一次输入后，我无法找到绑定到该触发的事件。我想我可以使用超时但我想我会问我是否在Angular 2中遗漏了一些基本概念。

Answer 1

实现在触发ngOnInit后触发的DoCheck生命周期钩子。您可以使用此生命周期钩子来触发无法通过angular2初始化的更新。

＆＃13;

import { Directive, HostListener, ElementRef, DoCheck } from "@angular/core";

@Directive({ selector: "[fixeddecimal]" })
export class FixedDecimalDirective implements DoCheck  {

  private el: HTMLInputElement;

  constructor(
    private elementRef: ElementRef
  ) {
    this.el = this.elementRef.nativeElement;
  }

  
  
  ngDoCheck() {
    let inputVal : number = +this.el.value;
    this.el.value =  inputVal.toFixed(3).toString();
  }
  

  @HostListener("blur", ["$event.target.value"])
  onBlur(value) {
    let inputVal : number = +this.el.value;
    this.el.value =  inputVal.toFixed(3).toString();
  }

}

＆＃13;

Answer 2

我使用私有布尔值实现了我的ngDoCheck，以跟踪是否已应用该值。

private onLoadCheck: boolean = false;

ngDoCheck() {
    // check if value is applied on init
    if (this.el.value && this.el.value > 0) {
        if (!this.onLoadCheck) {
            let inputVal: any = +this.el.value;
            this.el.value = this.currencyPipe.transform(inputVal);
            this.onLoadCheck = true;
        }
    }
}

Answer 3

尝试使用AfterViewChecked挂钩：

import { Directive, HostListener, ElementRef, OnInit, AfterViewChecked } from "@angular/core";

@Directive({ selector: "[fixeddecimal]" })
export class FixedDecimalDirective implements OnInit, AfterViewChecked {

    private el: HTMLInputElement;

    constructor(
        private elementRef: ElementRef
    ) {
        this.el = this.elementRef.nativeElement;
    }

    ngOnInit() {
        this.onBlur(0);
    }

    ngAfterViewChecked() {

        this.onBlur(0);
    }
    @HostListener("blur", ["$event.target.value"])
    onBlur(value) {
        let inputVal: number = +this.el.value;
        this.el.value = inputVal.toFixed(3).toString();
        //    this.el.value = this.currencyPipe.transform(value);
    }

}

在模型加载后触发Angular 2属性指令

3 个答案: