Angular 无法更改应用了指令的ngOnInit中的dom元素值

我正在使用自定义指令格式化百分比值。除了我无法加载我在ngOnInit上应用了指令的元素的格式化值之外，其他一切都正常工作。如果该元素上没有[（ngModel）]，则它可以正常工作。我也尝试过其他生命周期挂钩，比如ngAfterViewInit，但它不起作用。它适用于ngAfterViewChecked或ngDoCheck，但在输入元素中输入值时，该指令的行为不正确

请参考样品

---

我通过以下步骤修复了它：

• 已将NgModel作为提供程序删除
• 从构造函数中删除NgModel，以利于NgControl
• 已将onInit逻辑移动到订阅中的valueChanges上

构造函数（控件：NgControl）{}
恩戈尼尼特（）{
this.control.valueChanges.subscribe（值=>{
让小数点0=“0”。重复（此为小数）；
让uiValue:string=`0.${decimalZeroes}`；
let onBlurValue:string=this.el.nativeElement.value；
让parsedValue:number=parseFloat（onBlurValue）；
如果（解析值>100.0）{
uiValue=`100.${decimalZeroes}`；
}如果（！isNaN（parsedValue））为else{
uiValue=this.decimalPipe.transform（parsedValue，'1.'+this.decimals+'-'+this.decimals）；
}
this.el.nativeElement.value=uiValue+'%'；
});
}

找到了临时解决方案： 在我的ngOnInit中，我检查控件是否原始，然后才检查格式化是否活动。此后，在模糊上，我再次将控件标记为原始状态。以下是示例链接：

---

谢谢，它会在NIT上显示格式化的值，但是在键入时无法编辑该值。每次更改DOM值时都会调用valueChanges。

<!-- in app.component.html -->
<input type="text" appPercent [digit]="3" [decimals]="2" 
  [(ngModel)]="profitPercent">

// in percent.directive.ts
ngOnInit(){
    let decimalZeroes = "0".repeat(this.decimals);
    let uiValue: string = `0.${decimalZeroes}`;
    let onBlurValue: string = this.el.nativeElement.value;
    let parsedValue: number =  parseFloat(onBlurValue);

    if (parsedValue>100.0) {
      uiValue = `100.${decimalZeroes}`;
    } else if(!isNaN(parsedValue)){
      // this.model.update.emit(parsedValue); // this does not work
      uiValue = this.decimalPipe.transform(parsedValue,'1.'+ this.decimals + '-' + this.decimals);
    }
    this.el.nativeElement.value = uiValue + '%';
}

ngOnInit() {
    let that = this;
    let toPercent: any;
    let percentStr: string;

    this.model.valueChanges.subscribe(value => {
        console.log(that.model.control.pristine);
        if (that.model.control.pristine && value) {
            toPercent = value;
            let formattedValue = that.decimalPipe.transform(
                    toPercent,
`1.${that.decimals}-${that.decimals}`);
            percentStr = `${toPercent}%`;
            that.model.valueAccessor.writeValue(percentStr);
        }
    });
}

 @ HostListener("blur")
onBlur() {
    let decimalZeroes = "0".repeat(this.decimals);
    let uiValue: string = `0.${decimalZeroes}`;
    let onBlurValue: string = this.el.nativeElement.value;
    let parsedValue: number = parseFloat(onBlurValue);

    if (!this.greaterThan100 && parsedValue > 100.0) {
        uiValue = `100.${decimalZeroes}`;
    } else if (!isNaN(parsedValue)) {
        // this.model.update.emit(parsedValue);
        uiValue = this.decimalPipe.transform(
                parsedValue,
                "1." + this.decimals + "-" + this.decimals);
    }
    this.el.nativeElement.value = uiValue + "%";
    this.model.control.markAsPristine();
}