大佬教程收集整理的这篇文章主要介绍了angular – 删除空间时,带管道的输入框不会更新值,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
当我在输入框中键入或按下退格键时,管道会提供所需的输出.
问题:当我从“输入”框中删除空格时,输入框不会更新.
例如如果我将值从123 123更改为123123,则输入框不会更新.
管道:
@Pipe({name: 'formatCurrency'}) export class FormatCurrencyPipe implements PipeTransform{ transform(value: String): String { //convert to String value = value.toString(); // remove spaces value = value.replace(/ /g,''); console.log('Spaces removed'); console.log(value); // add spaces value = value.replace(/\B(?=(\d{3})+(?!\d))/g,' '); console.log('Spaces Added'); console.log(value); return value; } }
HTML:
<input type="text" (keypress)="disableSpace($event)" [ngModel]="data.value | formatCurrency" (ngModelChangE)="data.value = $event" />
零件:
export class App implements OnInit { name:string; data:any = {value: 123345}; constructor() {} ngOnInit(): void { this.name = 'Angular2'; } disableSpace(event: any) { if (event.charCode && event.charCode === 32 || event.which && event.which === 32) { event.preventDefault(); } } }
Plunker:https://plnkr.co/edit/j5tmNxllfZxP0EDp2XgL?p=preview
因此,当管道返回新格式化的字符串时,它仍然与之前返回的字符串相同.
因此,我们需要使用一些角度魔法来实现这一目标.
@Pipe({name: 'formatCurrency'}) export class FormatCurrencyPipe implements PipeTransform{ transform(value: String): String { //convert to String value = value.toString(); // remove spaces value = value.replace(/ /g,' '); console.log('Spaces Added'); console.log(value); return WrappedValue.wrap(value); } }
请注意,管道现在返回WrappedValue.wrap(value).
这表示即使引用未更改,管道转换的结果也已更改.
供参考:https://angular.io/docs/js/latest/api/core/index/WrappedValue-class.html
Plunker:https://plnkr.co/edit/dhxtZrTeRKm2FSw5DIJU?p=preview
以上是大佬教程为你收集整理的angular – 删除空间时,带管道的输入框不会更新值全部内容,希望文章能够帮你解决angular – 删除空间时,带管道的输入框不会更新值所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。