大佬教程收集整理的这篇文章主要介绍了Angular2 – 指令不更新模型,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
如何使用新值更新模型?
这是一个精简的例子:
app.ts
@Component( @Component({ SELEctor : 'my-app',template : ` <div> <br/> <br/> <p>Stack Overflow person - give focus to text @L_607_9@ and then lose focus by clicking elsewhere in the screen. <br/>The model is not updated.</p> <br/>Model value: {{ balanceamount }} <br/> <br/> <input type="text" [(ngModel)]="balanceamount" myCurrencyFormatter /><br/> </div> `,}) export class App { name:string; constructor(private mycurpipe: MyCurrencyPipE) { this.balanceamount = 1234567.89; } }
货币格式化,Directive.ts
@Directive({ SELEctor: "[myCurrencyFormatter]" }) export class MyCurrencyFormatterDirective implements OnInit { private el: any; constructor( private elementRef: ElementRef,private currencyPipe: MyCurrencyPipe ) { this.el = this.elementRef.nativeElement; } ngOnInit() { this.el.value = this.currencyPipe.transform(this.el.value); } @HostListener("focus",["$event.target.value"]) onFocus(value) { this.el.value = this.currencyPipe.parse(value); // opossite of transform } @HostListener("blur",["$event.target.value"]) onBlur(value) { this.el.value = this.cleannumber(value); //"987654" ;//this.currencyPipe.transform(value); } cleannumber (value: number) { return 8888888; // clean logic goes here,removed for plunk example } }
import { Directive,HostListener,ElementRef,OnInit,EventEmitter,Output } from "@angular/core"; import { MyCurrencyPipe } from "./my-currency.pipe"; @Directive({ SELEctor: "[myCurrencyFormatter]" }) export class MyCurrencyFormatterDirective implements OnInit { private el: any; @Output() ngModelChange = new EventEmitter(); constructor( private elementRef: ElementRef,["$event.target.value"]) onFocus(value) { this.el.value = this.currencyPipe.parse(value); // oposite of transform this.ngModelChange.emit(this.el.value); } @HostListener("blur",["$event.target.value"]) onBlur(value) { this.el.value = this.cleannumber(value); //"987654" ;//this.currencyPipe.transform(value); this.ngModelChange.emit(this.el.value); } cleannumber (value: number) { return 8888888; } }
以上是大佬教程为你收集整理的Angular2 – 指令不更新模型全部内容,希望文章能够帮你解决Angular2 – 指令不更新模型所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。