Невозможно изменить значение элемента dom в ngOnInit с примененной директивой - PullRequest
Новая
       17

Невозможно изменить значение элемента dom в ngOnInit с примененной директивой

1 голос
/ 03 августа 2020

Я использую специальную директиву для форматирования процентных значений. Все работает, как ожидалось, за исключением того, что я не могу загрузить отформатированное значение элемента, к которому я применил директиву в ngOnInit. Он отлично работает, если в этом элементе нет [(ngModel)]. Я также пробовал использовать другие хуки жизненного цикла, такие как ngAfterViewInit, но это не сработает. Он работает с ngAfterViewChecked или ngDoCheck, но тогда директива ведет себя некорректно при вводе значения в элемент ввода.

См. Пример процент-директива 

<!-- 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 + '%';
}

1 Ответ

2 голосов
/ 03 августа 2020

Я исправил это, выполнив следующие действия:

  • удалил NgModel в качестве поставщика
  • удалил NgModel из конструктора в пользу NgControl
  • перенесено на Init logi c внутри подписки на valueChanges 
constructor(control: NgControl) {}

ngOnInit(){
    this.control.valueChanges.subscribe(value => {
      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)) {
        uiValue = this.decimalPipe.transform(parsedValue,'1.'+ this.decimals + '-' + this.decimals);
      }
      this.el.nativeElement.value = uiValue + '%';
    });
  }
...