模型加載後觸發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屬性指令

回答

相關問題