Угловая директива: изменение модели не обновляет вид

Question

[Извините за мой плохой английский]

У меня есть простой кредитный калькулятор.

На входе "Принципал" есть директива, которая автоматически корректирует значение.

Если пользователь вводит 100, то директива умножит его на 1000.

Но PMT не обновляется.

Пример кода: https://stackblitz.com/edit/angular-srdbew?file=src%2Fapp%2Fthousands.directive.ts

Спасибо залюбая помощь.

Answer 1

Вам необходимо вывести событие из вашей директивы, чтобы обновить компонент, чтобы компонент распознал изменения. Сейчас он меняет значение, но не обновляет его в контексте Angular. проверить реализацию здесь

обновить вашу директиву

import { Directive, HostListener, ElementRef, OnInit, EventEmitter, Output } from "@angular/core";
@Directive({
 selector: '[appThousands]'
})
export class ThousandsDirective {
 // Here declare output event
 @Output() ngModelChange = new EventEmitter(); //declare output
 constructor(private element: ElementRef<HTMLInputElement>) { }

 @HostListener("change")
 onChange() {
  const input = this.element.nativeElement;
  const value = input.value;

  if (value.startsWith("=")) {
    let exactValue = value.substr(1);
    input.value = exactValue;
  }

  else if (+value < 1000) {
    input.value = (+value * 1000).toString();
  }
  // emit event here
  this.ngModelChange.emit(this.element.nativeElement.value); //add event here
 }
}