[对不起我的英语不好]
我有一个简单的贷款计算器。
“主体”输入具有自动更正值的指令。
如果用户键入100,则该指令会将其乘以1000。
但是,PMT不会更新。
示例代码: https://stackblitz.com/edit/angular-srdbew?file=src%2Fapp%2Fthousands.directive.ts
感谢您的帮助。
答案 0 :(得分:1)
您需要从指令中输出事件以更新组件,以便该组件识别更改。现在,它正在更改值,但未在Angular上下文中更新。检查实施here
更新指令
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
}
}