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

我正在尝试创建一个始终显示3个小数位的数字输入。所以如果1.1的值显示为1.100。我创建了一个响应模糊事件的指令，它运行良好，但如果ngModel在加载时传递一个值，则无法获取格式。模型加载后触发Angular 2属性指令

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

下面的代码演示了这种（一个未填补的3个负载输入，如果单击进出，该值将变为3.000：https://embed.plnkr.co/L1wxZN8n8tGvWU51KLcj/

我无法找到绑定到火灾事件我想我可以使用超时，但我想我会问我是否错过了Angular 2中的一些基本概念。

2016-11-02 goneforawhile

实现DoCheck生命周期挂钩，它将会在第一次传播在触发ngOnInit后触发，您可以使用此生命周期钩子来触发无法通过angular2初始化的更新

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(); 
 
    } 
 

 
}

来源

2016-11-02 03:34:25

我其实只是在和那个事件混在一起。它似乎被解雇了很多，然后最终影响了盒子的输入功能。无论如何，当我检测到我想要的更改后，取消注册事件处理程序？ – goneforawhile

我实现我的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; 
     } 
    } 
}

来源

2017-05-08 06:42:47

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

回答

相关问题